业务中有时需要在异步获取数据并用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没有向当前控制器传递事件的方法,可以先向父(子)控制器传递事件,父(子)控制器监听到事件后反过来向子(父)控制器传递事件。

补充:IE8可以直接在元素上用指令ng-if="$last && renderFinish()",当然IE8+也可以这样用

一句话总结:指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧

by:古德God http://www.cnblogs.com/wangmeijian/p/5141266.html

利用angular指令监听ng-repeat渲染完成后执行脚本的更多相关文章

  1. angular指令监听ng-repeat渲染完成后执行自定义事件方法

    今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...

  2. angular中关于自定义指令——repeat渲染完成后执行动作

    业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...

  3. android 利用重力感应监听 来电时翻转手机后静音。

       在CallNotifier.java中 加入如下代码: public void GetSensorManager(Context context) { sm = (SensorManager) ...

  4. Unity中利用委托与监听解耦合的思路

    这篇随笔是一篇记录性的随笔,记录了从http://www.sikiedu.com/my/course/304,这门课程中学到的内容,附带了一些自己的思考. 一.单例模式的应用 首先假想一种情况,现在需 ...

  5. Java线程监听,意外退出线程后自动重启

    Java线程监听,意外退出线程后自动重启 某日,天朗气清,回公司,未到9点,刷微博,顿觉问题泛滥,惊恐万分! 前一天写了一个微博爬行程序,主要工作原理就是每隔2分钟爬行一次微博,获取某N个关注朋友微博 ...

  6. Ogre 监听类与渲染流程

    Ogre中有许多监听类,我们可以简单理解成C#中的事件,这些类作用都不小,说大点可能改变流程,说小点修改参数等,下面列举一些常用的监听类. FrameListener:由Ogre中的Root负责维护, ...

  7. 利用select/poll监听多个设备详解

    如果一个应用程序去处理多个设备,例如应用程序读取网路数据,按键,串口,一般能想到的有三种方法: 方法1:串行+阻塞的方式读取:while(1) { read(标准输入);read(网络);}缺点:每当 ...

  8. 利用支付宝Cookie监听交易订单实现个人支付宝收款实时回调通知

    在网上.社区里搜了一下好像没找到什么文章详细分享这种方式的,这些天我花了些时间研究整理了一下,发现这种方式能实时获取到支付宝里的二维码收款记录,从而很好地实现个人支付宝免签约收款实时回调,于是在这里分 ...

  9. angular 全局 监听路由变化

    app.run(['$rootScope', '$location', function($rootScope, $location) { /* 监听路由的状态变化 */ $rootScope.$on ...

随机推荐

  1. C#代码连接Oracle数据库一段时间以后[connection lost contact]的问题

    最近在使用C#代码连接Oracle数据库,分为两部分,WCF的客户端与服务端.程序启动与运行都没有问题,部署到服务器上后,运行也没有问题.但是第二天再访问的时候,就会抛出下边所示的异常.这是怎么回事? ...

  2. jq禁用html标签

    原文:http://www.jb51.net/article/105154.htm 移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabl ...

  3. gdb调试遇到的问题

    解决方法:http://stackoverflow.com/questions/31062010/ubuntu-14-04-gcc-4-8-4-gdb-pretty-printing-doesnt-w ...

  4. RAC手动中断订阅

    __block RACDisposable* dispose = [[RACObserve(self, price) skip:1]subscribeNext:^(NSNumber* x) { [di ...

  5. 文件通过svn updata更新不到,并且svn st显示被删除的解决办法

    不知道什么原因导致某些文件丢失,svn updata更新后仍然没有找到,采用svn st 显示这些文件被删除,svn reslove 也解决不了,头疼了很久,最近突然解决了,具体步骤如下(已经过验证) ...

  6. python 喜马拉雅 音乐下载 演示代码

    1.主程序文件 import os import json import requests from contextlib import closing from progressbar import ...

  7. spring Mvc + Maven + 拷贝插件 (十一)

    maven-antrun-plugin:可用于在项目编译打包时,把文件指定的文件拷贝到指定的位置,我们打包一般都是打包到 项目 的target 文件下; <groupId>org.apac ...

  8. [python]python错误集锦

    ValueError: invalid literal : ''不能将非数字字符串转换为整型 object has no attribute 对象调用一个没有的方法(内建或自定义) TypeError ...

  9. HDU 4608 I-number 2013 Multi-University Training Contest 1 1009题

    题目大意:输入一个数x,求一个对应的y,这个y满足以下条件,第一,y>x,第二,y 的各位数之和能被10整除,第三,求满足前两个条件的最小的y. 解题报告:一个模拟题,比赛的时候确没过,感觉这题 ...

  10. 第6月第17天 CGAffineTransformMake(a,b,c,d,tx,ty) 矩阵运算的原理

    1. 为了把二维图形的变化统一在一个坐标系里,引入了齐次坐标的概念,即把一个图形用一个三维矩阵表示,其中第三列总是(0,0,1),用来作为坐标系的标准.所以所有的变化都由前两列完成. 以上参数在矩阵中 ...