Angularjs自定義指令Directive詳解
更新時(shí)間：2017年05月27日 09:37:38 作者：Insus.NET
Directive是一個(gè)非常棒的功能?？梢詫?shí)現(xiàn)我們自義的的功能方法。下面通過實(shí)例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
今天學(xué)習(xí)angularjs自定義指令Directive。
Directive是一個(gè)非常棒的功能。可以實(shí)現(xiàn)我們自義的的功能方法。
下面的例子是演示用戶在文本框輸入的帳號(hào)是否為管理員的帳號(hào)"Admin"。
在網(wǎng)頁上放一個(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的類庫(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ì)大家有所幫助，如果大家有任何疑問請(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ì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了AngularJS表單驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
下面小編就為大家?guī)硪黄狝ngular 路由route實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧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ì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了ng-alain的sf如何自定義部件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
Angular移動(dòng)端頁面input無法輸入的解決方法
下面小編就為大家?guī)硪黄狝ngular移動(dòng)端頁面input無法輸入的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
AngularJS入門教程之學(xué)習(xí)環(huán)境搭建
這篇文章主要介紹了AngularJS入門教程之學(xué)習(xí)環(huán)境搭建,本教程將指導(dǎo)您完成一個(gè)簡(jiǎn)單的應(yīng)用程序創(chuàng)建過程,包括編寫和運(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