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 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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中for与foreach的区别分析
2011/03/09 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
nodejs更改项目端口号的方法
2018/05/13 NodeJs
微信小程序实现城市列表选择
2018/06/05 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python实现学生信息管理系统
2020/04/05 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
struct与class的区别
2014/02/03 面试题
教师实习期自我鉴定
2013/10/06 职场文书
综合办公室主任职责
2013/12/16 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
《打电话》教学反思
2016/02/22 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
python内置进制转换函数的操作
2021/06/02 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript