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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
JS求平均值的小例子
Nov 29 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
js传值 判断
2006/10/26 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
使用Python对Access读写操作
2017/03/30 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
Python自定义线程类简单示例
2018/03/23 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
python各种excel写入方式的速度对比
2020/11/10 Python
写求职信有什么意义
2014/02/17 职场文书
销售团队口号大全
2014/06/06 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
旷课检讨书500字
2014/10/14 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
无线电知识基础入门篇
2022/02/18 无线电