宝哥软件园

Angularjs自定义指令管理的详解

编辑:宝哥软件园 来源:互联网 时间:2021-09-04

今天学习angularjs自定义指令指令。

管理的是一个非常棒的功能。可以实现我们自义的的功能方法。

下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号管理员。

在网页上放一个文本框和一个铵钮:

表单id='form1 '名称=' form 1 ' ng-app=' app ' ng-controller=' ctrl ' novalidate输入id='Text1 '类型=' text ' ng-model=' Account ' is-Administrator/br/输入id='ButtonVerify '类型='按钮'值='验证' ng-单击='验证();'//表单然后你需要引用angularjs的类库:

@脚本。渲染(~/束/角)以上是ASP .NET MVC捆绑包了。

定义一个App:

var app=angular.module('app ',[]);定义一个控制器:

app.controller('ctrl ',函数($scope) { $scope .账户;$scope .verify=function(){ if($ scope。表格1。$ valid){ alert(' OK ');} else { alert("失败"));} };});下面是重点代码,自定义指令:

app。指令(' isaadministrator ',函数($q,$ time out){ var adminAccount=' Admin ';var checkisaadministrator=function(account){ return adminAccount==account?真:假;};返回{ restrict: 'A ',require: ' ngModel ',link:函数(作用域,元素,属性,n型号){ n型号.$ AsynCvalidators。isaadministrator=function(value){ var delay=$ q . delay();$ time out(函数(){ if(CheckIsadministrator(值)){ delay。resolve();} else { delay。reject();} }, 700);返回延期。承诺;} } };});演示:

以上所述是小编给大家介绍的Angularjs自定义指令管理的详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

更多资讯
游戏推荐
更多+