Angularjs自定義指令Directive詳解

更新時(shí)間：2017年05月27日 09:37:38 作者：Insus.NET

Directive是一個(gè)非常棒的功能。可以實(shí)現(xiàn)我們自義的的功能方法。下面通過(guò)實(shí)例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧

今天學(xué)習(xí)angularjs自定義指令Directive。

Directive是一個(gè)非常棒的功能?？梢詫?shí)現(xiàn)我們自義的的功能方法。

下面的例子是演示用戶(hù)在文本框輸入的帳號(hào)是否為管理員的帳號(hào)"Admin"。

在網(wǎng)頁(yè)上放一個(gè)文本框和一個(gè)銨鈕：

<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的類(lèi)庫(kù)：

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

以上是ASP.NET MVC bundle了。

定義一個(gè)App:

 var app = angular.module('app', []);

定義一個(gè)控制器：

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

下面是重點(diǎn)代碼，自定義指令：

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詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Angular實(shí)現(xiàn)模版驅(qū)動(dòng)表單的自定義校驗(yàn)功能(密碼確認(rèn)為例)
這篇文章主要介紹了Angular實(shí)現(xiàn)模版驅(qū)動(dòng)表單的自定義校驗(yàn)功能(密碼確認(rèn)為例),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
AngularJS與后端php的數(shù)據(jù)交互方法
今天小編就為大家分享一篇AngularJS與后端php的數(shù)據(jù)交互方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
AngularJS表單驗(yàn)證中級(jí)篇（3）
這篇文章主要為大家詳細(xì)介紹了AngularJS表單驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Angular 路由route實(shí)例代碼
下面小編就為大家?guī)?lái)一篇Angular 路由route實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
AngularJS使用angular.bootstrap完成模塊手動(dòng)加載的方法分析
這篇文章主要介紹了AngularJS使用angular.bootstrap完成模塊手動(dòng)加載的方法,結(jié)合實(shí)例形式分析了angular.bootstrap函數(shù)手動(dòng)加載模塊的步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-01-01
angularJs select綁定的model取不到值的解決方法
今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
ng-alain的sf如何自定義部件的流程
這篇文章主要介紹了ng-alain的sf如何自定義部件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
Angular移動(dòng)端頁(yè)面input無(wú)法輸入的解決方法
下面小編就為大家?guī)?lái)一篇Angular移動(dòng)端頁(yè)面input無(wú)法輸入的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
AngularJS入門(mén)教程之學(xué)習(xí)環(huán)境搭建
這篇文章主要介紹了AngularJS入門(mén)教程之學(xué)習(xí)環(huán)境搭建,本教程將指導(dǎo)您完成一個(gè)簡(jiǎn)單的應(yīng)用程序創(chuàng)建過(guò)程,包括編寫(xiě)和運(yùn)行單元測(cè)試、不斷地測(cè)試應(yīng)用,需要的朋友可以參考下
2014-12-12
angularjs實(shí)現(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)天氣預(yù)報(bào)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10