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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
Nuxt.js实战和配置详解
Aug 05 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP 递归效率分析
2009/11/24 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python实现udp传输图片功能
2020/03/20 Python
python新手学习使用库
2020/06/11 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
初二数学教学反思
2016/02/17 职场文书