Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法


Posted in Javascript onDecember 31, 2016

前言

在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用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>
</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渲染完成后执行脚本的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
Vue实现多标签选择器
Nov 28 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
angularjs中ng-attr的用法详解
Dec 31 #Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 #Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 #Javascript
Javascript 实现全屏滚动实例代码
Dec 31 #Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 #Javascript
javascript 闭包详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs中的$resource服务
Dec 31 #Javascript
You might like
ThinkPHP之getField详解
2014/06/20 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python安装教程
2018/02/28 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
师德先进个人材料
2014/12/20 职场文书
羊脂球读书笔记
2015/06/30 职场文书
初中语文教学反思范文
2016/03/03 职场文书
工伤调解协议书
2016/03/21 职场文书