Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍


Posted in Javascript onDecember 13, 2016

Angular 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没有向当前控制器传递事件的方法,可以先向父(子)控制器传递事件,父(子)控制器监听到事件后反过来向子(父)控制器传递事件。

一句话总结:指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 #Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 #Javascript
vue.js学习之递归组件
Dec 13 #Javascript
AngularJS过滤器filter用法总结
Dec 13 #Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 #Javascript
AngularJS服务service用法总结
Dec 13 #Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 #Javascript
You might like
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python连接phoenix的方法示例
2017/09/29 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
实习生自荐信范文分享
2013/11/27 职场文书
2014年师德承诺书
2014/05/23 职场文书
感恩教育月活动总结
2014/07/07 职场文书
门面房租房协议书
2014/08/20 职场文书
上班迟到检讨书
2014/09/15 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
Nginx的基本概念和原理
2022/03/21 Servers