我要评论今天学习angularjs自定义指令directive。
directive是一个非常棒的功能。可以实现我们自义的的功能方法。
下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"admin"。
在网页上放一个文本框和一个铵钮：
<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详解，希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论