利用angular指令监听ng-repeat渲染完成后执行脚本
来源:互联网 发布:linux运维工程师薪资 编辑:程序博客网 时间:2024/06/08 11:54
此文为转载,出处:http://www.cnblogs.com/wangmeijian/p/5141266.html
业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写。有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$last的值:自定义指令
小实例,我只写了最重要的部分
//要循环的数据$scope.data = [ { str: 'a' }, { str: 'b' }, { str: 'c' }]//自定义指令repeatFinish app.directive('repeatFinish',function(){ return { link: function(scope,element,attr){ console.log(scope.$index) if(scope.$last == true){ console.log('ng-repeat执行完毕') } } }})<div id="box"> <span ng-repeat="item in data" repeat-finish>{{item.str}}</span> //小驼峰,repeatFinish ,用 - 隔开,repeat-finish </div>
打开控制台,会打印出0,1,2,当$index = 2点时候,$last值为true,ng-repeat渲染完毕
so easy!
当然指令最好是能够复用,在这个指令内写具体的业务逻辑不利于复用,可以通过给指令指定一个处理函数renderFinish
<div id="box"> <span ng-repeat="item in data" repeat-finish="renderFinish()">{{item.str}}</span></div>
再通过指令的attr参数获取这个处理函数
app.directive('repeatFinish',function(){ return { link: function(scope,element,attr){ console.log(scope.$index) if(scope.$last == true){ console.log('ng-repeat执行完毕') scope.$eval( attr.repeatFinish ) } } }})//controller里对应的处理函数$scope.renderFinish = function(){ console.log('渲染完之后的操作')}
attr获取到的属性只是一个字符串表达式,$scope.$eval方法是专门执行AngularJS表达式的,通过它处理函数得以执行,这样,指令用在不同的地方,可传递不同的处理函数。
有些业务比较复杂,可能ng-repeat渲染完成之后,需要执行多个操作并且这多个操作有多个前端完成,需要用到angular的事件,在repeatFinish指令的link函数内触发一个事件,各位前端同学监听该事件完成各自的操作
app.directive('repeatFinish',function(){ return { link: function(scope,element,attr){ console.log(scope.$index) if(scope.$last == true){ console.log('ng-repeat执行完毕') //向父控制器传递事件 scope.$emit('to-parent'); //向子控制器传递事件 scope.$broadcast('to-child'); } } }})//父控制器中监听事件$scope.$on('to-parent',function(){ //父控制器执行操作})//子控制器中监听事件$scope.$on('to-child',function(){ //子控制器执行操作})
如何在当前控制器下监听到该事件呢?angular没有向当前控制器传递事件的方法,可以先向父(子)控制器传递事件,父(子)控制器监听到事件后反过来向子(父)控制器传递事件。
补充:IE8可以直接在元素上用指令ng-if="$last && renderFinish()",当然IE8+也可以这样用
一句话总结:指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧
by:古德God http://www.cnblogs.com/wangmeijian/p/5141266.html
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- 利用angular指令监听ng-repeat渲染完成后执行函数
- angular指令监听ng-repeat渲染完成
- angularJs监听ng-repeat渲染完成
- angular指令:判断ng-repeat完成后的回调事件
- ionic 中使用 slidebox 利用angular ng-repeat 渲染后不显示问题
- ionic 中使用 slidebox 利用angular ng-repeat 渲染后不显示问题
- ionic 中使用 slidebox 利用angular ng-repeat 渲染后不显示问题
- ionic 中使用 slidebox 利用angular ng-repeat 渲染后不显示问题
- Angular Js ng-repeat指令
- angularjs 监听ng-repeat状态,然后执行脚本
- ng-repeat执行完成之后操作方法
- (四上)Angular指令,ng-bind指令,ng-init 指令,ng-click指令,ng-repeat 指令
- 提示:微信小程序开发教程链接
- JZOJ4793. 妮厨的愤怒
- day15 python css属性选择器
- hql delete能执行但数据库无变动
- 图之 最小生成树 Kruskal算法
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- Developer FAQ: Building | 开发人员常遇到的问题:构建
- HDU 3709 Balanced Number (数位DP)
- Java的练习4
- 又见神奇的异或。Trie树。今日头条。
- 这个应该是目前最全的Tracking相关的文章了
- UVA 12169
- Caffe 源码阅读笔记 [基本模块] Syncedmem & Blob
- 获取linux下,tcp、udp的系统默认缓存大小和最大值