Angularjs自定義指令Directive詳解
更新時間：2017年05月27日 09:37:38 作者：Insus.NET
Directive是一個非常棒的功能?？梢詫崿F(xiàn)我們自義的的功能方法。下面通過實例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識，感興趣的朋友一起學習吧
今天學習angularjs自定義指令Directive。
Directive是一個非常棒的功能?？梢詫崿F(xiàn)我們自義的的功能方法。
下面的例子是演示用戶在文本框輸入的帳號是否為管理員的帳號"Admin"。
在網(wǎng)頁上放一個文本框和一個銨鈕：
<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', []);
定義一個控制器：
app.controller('ctrl', function ($scope) {
$scope.Account;
$scope.Verify = function () {
if ($scope.form1.$valid) {
alert('OK.');
}
else {
alert('failure.');
}
};
});
下面是重點代碼，自定義指令：
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詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了AngularJS入門教程之路由機制ngRoute,結(jié)合實例形式分析了AngularJS路由機制的原理、ngRoute的組成、配置、參數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
Angular中ng?update命令force參數(shù)含義詳解
這篇文章主要為大家介紹了Angular中ng?update命令force參數(shù)含義詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要給大家介紹了關(guān)于Angular利用HTTP POST下載流文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
詳解封裝基礎(chǔ)的angular4的request請求方法
這篇文章主要介紹了詳解封裝基礎(chǔ)的angular4的request請求方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
我們對接的過程中總是遇到跨域的問題，本文使用 angualr 來講解代理api對接的話題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
設(shè)計一個組件時，組件應(yīng)該是內(nèi)聚的，應(yīng)該不依賴外部已經(jīng)存在的組件，要實現(xiàn)這種松耦合的組件要使用中間人模式。2021-05-05
這篇文章主要介紹了淺談angular2路由預加載策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
angular.js實現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實現(xiàn)列表orderby排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章給大家詳細介紹了AngularJS中ng-src指令的使用，對大家學習AngularJS具有一定參考價值，有需要的朋友們可以參考借鑒。2016-09-09
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09