Rumah > hujung hadapan web > tutorial js > 关于Angularjs的自定义指令Directive的具体介绍

关于Angularjs的自定义指令Directive的具体介绍

黄舟
Lepaskan: 2017-05-27 10:40:34
asal
1524 orang telah melayarinya

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>
Salin selepas log masuk

然后你需要引用angularjs的类库

 @Scripts.Render("~/bundles/angular")
Salin selepas log masuk

以上是ASP.NET MVC bundle了。

定义一个App:

 var app = angular.module(&#39;app&#39;, []);
Salin selepas log masuk

定义一个控制器


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;);
    }
   };
  });
Salin selepas log masuk

下面是重点代码,自定义指令:


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;
     }
    }
   };
  });
Salin selepas log masuk

演示:

Atas ialah kandungan terperinci 关于Angularjs的自定义指令Directive的具体介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan