Angularjs中自定义指令的示例分析-创新互联
小编给大家分享一下Angularjs中自定义指令的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联建站是一家集网站建设,石台企业网站建设,石台品牌网站建设,网站定制,石台网站建设报价,网络营销,网络优化,石台网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。一:自定义指令常用模板
下面是大致的说明,不是全面的,后面来具体说明一些没有提及的细节和重要的相关知识:
angular.module('yelloxingApp', []).directive('uiDirective', function() { return { restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合 priority:Number,//设置指令执行优先级,在某个DOM上优先级高的会先执行 terminal:Boolean, template:String or Template Function,//就是设置模板,和下面的templateUrl属性二个只可以设置一个,目的一样 templateUrl:String or Template Function,//除了字符串,这二个属性还可以设置函数 replace:Boolean,//指令模板是否替换原来的元素 scope:Boolean or Object, controller:String or function(scope, element, attrs) { ... }, require:String or Array, //你需要知道link在每个实例都执行一遍,compile全程只会执行一遍 link: function(scope, element, attrs,ctrl) { ... }, compile:function(element, attrs) { //常用的就是compile的此处写执行一次的代码,或者在link方法里面写和dom有关的操作 } }; });
二:一些属性说明
【scope】
可以设置boolean或者对象,先来说说boolean,这个比较简单:
1.当设置true的时候,表示继承父scope,是一个子scope;
2.当设置false的时候,直接使用父scope。
还有一种对象设置方法,就是设置一种隔离的scope,在使用隔离scope的时候,提供了三种方法同隔离之外的地方交互,下面用一个例子来一一说明:
angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) { return { restrict: 'A', scope: { _userDataName: "=userDataName", _onSend: "&onSend", _fromName: "@fromName" }, template: `
- fromName={{newfromname}}
- 这是从父级获取到的{{_userDataName}}
上面是指令的写法,下面来看看控制器里面有什么:
$scope.name = "心叶"; $scope.user = "yelloxing"; $scope.sendMail = function(email){ console.error(email); }
最后别忘了html里面的使用:
复制代码 代码如下:
【require】
请求另外的controller,然后作为link方法的第四个参数传递进去,我们需要注意的是查找控制器的方法。
查找控制器的方法可以这样理解:使用?表示如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数,如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器,他们也可以组合,比如require: "?^ngModel",如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误。
【terminal】
属性terminal:为true时,指示优先级小于当前指令的指令都不执行,仅执行到本指令。
三:视图和model之间的数据格式化
类似过滤器的功能,有时候我们希望页面显示的是数据经过某种翻译后的样子,以便于约定,不过对于数据库也许简单的序号会更有益,因此你可能会需要在link中使用下面的方法来实现这个功能:
1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化});
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。
上面的$formatters和$parsers就是二个队列,视图到model和model到视图,会方便经过里面定义的方法的过滤,有点类似管道流,最后流到目的地。
别忘了设置类似require: "?ngModel"这样的语句去查找控制器。
四:视图和model数据同步问题
有时候在指令里面通过jquery修改了input的数据,不过angularjs并不会知道,这时候,你可以选择下面中的一个方法:
1.触发输入框change改变,让Angularjs发现数据改变了,从而去调用$setViewValue(value),同步数据:$("input").trigger("change");
2.直接手动触发同步value到viewValue和modelValue中的行为:ctrl.$setViewValue($scope.info)。
五:几个零碎的技巧
1.根据输入框是否合法来设置true或false:ctrl.$setValidity(errorType, boolean);//errorType表示错误类别,可以自定义
2.设置监听指定的一个model值,当然还有监听集合等方法:$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});
3.有时候在指令里面新添加的字符串需要被angularjs管理,就可以用下面的方法编译一下:$compile(newHtml)($scope)。
以上是“Angularjs中自定义指令的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站标题:Angularjs中自定义指令的示例分析-创新互联
网页URL:http://myzitong.com/article/dcjpeo.html