利用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没有向当前控制器传递事件的方法,可以先向父(子)控制器传递事件,父(子)控制器监听到事件后反过来向子(父)控制器传递事件。
补充:IE8可以直接在元素上用指令ng-if="$last && renderFinish()",当然IE8+也可以这样用
一句话总结:指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧
by:古德God http://www.cnblogs.com/wangmeijian/p/5141266.html
利用angular指令监听ng-repeat渲染完成后执行脚本的更多相关文章
- angular指令监听ng-repeat渲染完成后执行自定义事件方法
今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露 ...
- angular中关于自定义指令——repeat渲染完成后执行动作
业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...
- android 利用重力感应监听 来电时翻转手机后静音。
在CallNotifier.java中 加入如下代码: public void GetSensorManager(Context context) { sm = (SensorManager) ...
- Unity中利用委托与监听解耦合的思路
这篇随笔是一篇记录性的随笔,记录了从http://www.sikiedu.com/my/course/304,这门课程中学到的内容,附带了一些自己的思考. 一.单例模式的应用 首先假想一种情况,现在需 ...
- Java线程监听,意外退出线程后自动重启
Java线程监听,意外退出线程后自动重启 某日,天朗气清,回公司,未到9点,刷微博,顿觉问题泛滥,惊恐万分! 前一天写了一个微博爬行程序,主要工作原理就是每隔2分钟爬行一次微博,获取某N个关注朋友微博 ...
- Ogre 监听类与渲染流程
Ogre中有许多监听类,我们可以简单理解成C#中的事件,这些类作用都不小,说大点可能改变流程,说小点修改参数等,下面列举一些常用的监听类. FrameListener:由Ogre中的Root负责维护, ...
- 利用select/poll监听多个设备详解
如果一个应用程序去处理多个设备,例如应用程序读取网路数据,按键,串口,一般能想到的有三种方法: 方法1:串行+阻塞的方式读取:while(1) { read(标准输入);read(网络);}缺点:每当 ...
- 利用支付宝Cookie监听交易订单实现个人支付宝收款实时回调通知
在网上.社区里搜了一下好像没找到什么文章详细分享这种方式的,这些天我花了些时间研究整理了一下,发现这种方式能实时获取到支付宝里的二维码收款记录,从而很好地实现个人支付宝免签约收款实时回调,于是在这里分 ...
- angular 全局 监听路由变化
app.run(['$rootScope', '$location', function($rootScope, $location) { /* 监听路由的状态变化 */ $rootScope.$on ...
随机推荐
- C#代码连接Oracle数据库一段时间以后[connection lost contact]的问题
最近在使用C#代码连接Oracle数据库,分为两部分,WCF的客户端与服务端.程序启动与运行都没有问题,部署到服务器上后,运行也没有问题.但是第二天再访问的时候,就会抛出下边所示的异常.这是怎么回事? ...
- jq禁用html标签
原文:http://www.jb51.net/article/105154.htm 移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabl ...
- gdb调试遇到的问题
解决方法:http://stackoverflow.com/questions/31062010/ubuntu-14-04-gcc-4-8-4-gdb-pretty-printing-doesnt-w ...
- RAC手动中断订阅
__block RACDisposable* dispose = [[RACObserve(self, price) skip:1]subscribeNext:^(NSNumber* x) { [di ...
- 文件通过svn updata更新不到,并且svn st显示被删除的解决办法
不知道什么原因导致某些文件丢失,svn updata更新后仍然没有找到,采用svn st 显示这些文件被删除,svn reslove 也解决不了,头疼了很久,最近突然解决了,具体步骤如下(已经过验证) ...
- python 喜马拉雅 音乐下载 演示代码
1.主程序文件 import os import json import requests from contextlib import closing from progressbar import ...
- spring Mvc + Maven + 拷贝插件 (十一)
maven-antrun-plugin:可用于在项目编译打包时,把文件指定的文件拷贝到指定的位置,我们打包一般都是打包到 项目 的target 文件下; <groupId>org.apac ...
- [python]python错误集锦
ValueError: invalid literal : ''不能将非数字字符串转换为整型 object has no attribute 对象调用一个没有的方法(内建或自定义) TypeError ...
- HDU 4608 I-number 2013 Multi-University Training Contest 1 1009题
题目大意:输入一个数x,求一个对应的y,这个y满足以下条件,第一,y>x,第二,y 的各位数之和能被10整除,第三,求满足前两个条件的最小的y. 解题报告:一个模拟题,比赛的时候确没过,感觉这题 ...
- 第6月第17天 CGAffineTransformMake(a,b,c,d,tx,ty) 矩阵运算的原理
1. 为了把二维图形的变化统一在一个坐标系里,引入了齐次坐标的概念,即把一个图形用一个三维矩阵表示,其中第三列总是(0,0,1),用来作为坐标系的标准.所以所有的变化都由前两列完成. 以上参数在矩阵中 ...