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 实现导航栏悬停效果(续2)
Sep 24 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
jquery获取tagName再进行判断
May 29 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
js判断两个数组相等的5种方法
May 06 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
python定时器(Timer)用法简单实例
2015/06/04 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
总经理助理的职责
2014/03/14 职场文书
培训计划通知
2015/07/15 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
导游词之桂林山水
2019/09/20 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python