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的類庫：
@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)文章
AngularJS入門教程之路由機(jī)制ngRoute實(shí)例分析
這篇文章主要介紹了AngularJS入門教程之路由機(jī)制ngRoute,結(jié)合實(shí)例形式分析了AngularJS路由機(jī)制的原理、ngRoute的組成、配置、參數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
Angular中ng?update命令force參數(shù)含義詳解
這篇文章主要為大家介紹了Angular中ng?update命令force參數(shù)含義詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要給大家介紹了關(guān)于Angular利用HTTP POST下載流文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法
這篇文章主要介紹了詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
Angular中使用Api 代理的實(shí)現(xiàn)
我們對(duì)接的過程中總是遇到跨域的問題，本文使用 angualr 來講解代理api對(duì)接的話題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
設(shè)計(jì)一個(gè)組件時(shí)，組件應(yīng)該是內(nèi)聚的，應(yīng)該不依賴外部已經(jīng)存在的組件，要實(shí)現(xiàn)這種松耦合的組件要使用中間人模式。2021-05-05
這篇文章主要介紹了淺談angular2路由預(yù)加載策略，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
angular.js實(shí)現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實(shí)現(xiàn)列表orderby排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章給大家詳細(xì)介紹了AngularJS中ng-src指令的使用，對(duì)大家學(xué)習(xí)AngularJS具有一定參考價(jià)值，有需要的朋友們可以參考借鑒。2016-09-09
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09