溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Angularjs自定義指令Directive詳解

發(fā)布時間：2020-10-10 00:04:01 來源：腳本之家 閱讀：135 作者：Insus.NET 欄目：web開發(fā)

今天學習angularjs自定義指令Directive。

Directive是一個非常棒的功能?？梢詫崿F(xiàn)我們自義的的功能方法。

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

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

Angularjs自定義指令Directive詳解

<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('app', []);

定義一個控制器：

Angularjs自定義指令Directive詳解

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

下面是重點代碼，自定義指令：

Angularjs自定義指令Directive詳解

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詳解

以上所述是小編給大家介紹的Angularjs自定義指令Directive詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手