關於Angularjs的自訂指令Directive的具體介紹-js教程-PHP中文網

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

黄舟

發布： 2017-05-27 10:40:34

原創

1441 人瀏覽過

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中文網其他相關文章！