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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
Jquery性能优化详解
May 15 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
JavaScript实现区块链
Mar 14 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
openLayer4实现动态改变标注图标
Aug 17 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
PHP 上传文件大小限制
2009/07/05 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
php7下的filesize函数
2019/09/30 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
Nodejs模块载入运行原理
2018/02/23 NodeJs
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python如何绘制疫情图
2020/09/16 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
复古服装:RetroStage
2019/05/10 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
送货司机岗位职责
2013/12/11 职场文书
趣味比赛活动方案
2014/02/15 职场文书
日化店促销方案
2014/03/26 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
党的作风建设心得体会
2014/10/22 职场文书
高三毕业评语
2014/12/31 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python