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的.animate()函数在IE6下的问题
Dec 03 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
php ci框架验证码实例分析
2013/06/26 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
如何写出好的Java代码
2014/04/25 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
公益广告语集锦
2014/03/13 职场文书
红色旅游心得体会
2014/09/03 职场文书
党代会心得体会
2014/09/04 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
Python入门之基础语法详解
2021/05/11 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL