首頁  >  文章  >  web前端  >  關於Angularjs的自訂指令Directive的具體介紹

關於Angularjs的自訂指令Directive的具體介紹

黄舟
黄舟原創
2017-05-27 10:40:341378瀏覽

Directive是一個非常棒的功能。可以實現我們自義的的功能方法。以下透過實例程式碼給大家介紹Angularjs自訂指令Directive相關知識,有興趣的朋友一起學習吧

今天學習angularjs自訂指令Directive。

Directive是一個非常棒的功能。可以實現我們自義的的功能方法。

下面的範例是示範使用者在文字方塊輸入的帳號是否為管理者的帳號"Admin"。

在網頁上放一個文字方塊和一個銨鈕:


#
<form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate>
  <input id="Text1" type="text" ng-model="Account" is-Administrator/>
  <br />
  <input id="ButtonVerify" type="button" value="Verify" ng-click="Verify();" />
 </form>

然後你需要引用angularjs的類別庫

 @Scripts.Render("~/bundles/angular")

以上是ASP.NET MVC bundle了。

定義一個App:

 var app = angular.module(&#39;app&#39;, []);

定義一個控制器


##

app.controller(&#39;ctrl&#39;, function ($scope) {
   $scope.Account;
   $scope.Verify = function () {
    if ($scope.form1.$valid) {
     alert(&#39;OK.&#39;);
    }
    else {
     alert(&#39;failure.&#39;);
    }
   };
  });

下面是重點程式碼,自訂指令:



#

app.directive("isAdministrator", function ($q, $timeout) {
   var adminAccount = "Admin";
   var CheckIsAdministrator = function (account) {
    return adminAccount == account ? true : false;
   };
   return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, element, attributes, ngModel) {
     ngModel.$asyncValidators.isAdministrator = function (value) {
      var defer = $q.defer();
      $timeout(function () {
       if (CheckIsAdministrator(value)) {
        defer.resolve();
       } else {
        defer.reject();
       }
      }, 700);
      return defer.promise;
     }
    }
   };
  });

示範:


#

以上是關於Angularjs的自訂指令Directive的具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn