Angularjs自定義指令Directive詳解
更新時間：2017年05月27日 09:37:38 作者：Insus.NET
Directive是一個非常棒的功能?？梢詫崿F(xiàn)我們自義的的功能方法。下面通過實例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧
今天學(xué)習(xí)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詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Angular實現(xiàn)模版驅(qū)動表單的自定義校驗功能(密碼確認為例)
這篇文章主要介紹了Angular實現(xiàn)模版驅(qū)動表單的自定義校驗功能(密碼確認為例),本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
AngularJS與后端php的數(shù)據(jù)交互方法
今天小編就為大家分享一篇AngularJS與后端php的數(shù)據(jù)交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了AngularJS表單驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
下面小編就為大家?guī)硪黄狝ngular 路由route實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
AngularJS使用angular.bootstrap完成模塊手動加載的方法分析
這篇文章主要介紹了AngularJS使用angular.bootstrap完成模塊手動加載的方法,結(jié)合實例形式分析了angular.bootstrap函數(shù)手動加載模塊的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
angularJs select綁定的model取不到值的解決方法
今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了ng-alain的sf如何自定義部件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
下面小編就為大家?guī)硪黄狝ngular移動端頁面input無法輸入的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
AngularJS入門教程之學(xué)習(xí)環(huán)境搭建
這篇文章主要介紹了AngularJS入門教程之學(xué)習(xí)環(huán)境搭建,本教程將指導(dǎo)您完成一個簡單的應(yīng)用程序創(chuàng)建過程,包括編寫和運行單元測試、不斷地測試應(yīng)用,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了angularjs實現(xiàn)天氣預(yù)報功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10