angular指令监听ng-repeat渲染完成后执行自定义事件方法
今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令。
在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态,
怎么在遍历过程中拿到$last的值:自定义指令
var app = angular.module('app',[]); app.directive('repeatFinish',function(){
return {
link: function(scope,element,attr){
console.log(scope.$index)
if(scope.$last == true){
scope.$eval( attr.repeatFinish );
}
}
}
}) app.controller('appCtrl',function($scope,$element){
$scope.arr = [1,2,3,4,5,6];
$scope.tip = ''; //定义repeat完成后要执行的方法,方法名可自行定义
$scope.repeatDone = function(){
$scope.tip = 'ng-repeat完成,我要开始搞事情了!!!';
//执行自己要执行的事件方法
}
});
调用时使用angular调用指令的方法就可以了。
<div ng-repeat="i in arr" repeat-finish="repeatDone();">
<p ng-bind="i"></p>
</div>
angular指令监听ng-repeat渲染完成后执行自定义事件方法的更多相关文章
- 利用angular指令监听ng-repeat渲染完成后执行脚本
业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...
- angular中关于自定义指令——repeat渲染完成后执行动作
业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...
- Java线程监听,意外退出线程后自动重启
Java线程监听,意外退出线程后自动重启 某日,天朗气清,回公司,未到9点,刷微博,顿觉问题泛滥,惊恐万分! 前一天写了一个微博爬行程序,主要工作原理就是每隔2分钟爬行一次微博,获取某N个关注朋友微博 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- c# 获取移动硬盘信息、监听移动设备的弹出与插入事件
原文 http://www.cnblogs.com/coolkiss/p/3328825.html 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr Wnd ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式)
bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式) 一.总结 一句话总结:通过监听滚动的高,判断滚动的高是否大于元素距离顶端的距离 1.如何知道屏幕滚动的高? st=$ ...
- Ogre 监听类与渲染流程
Ogre中有许多监听类,我们可以简单理解成C#中的事件,这些类作用都不小,说大点可能改变流程,说小点修改参数等,下面列举一些常用的监听类. FrameListener:由Ogre中的Root负责维护, ...
- angular 全局 监听路由变化
app.run(['$rootScope', '$location', function($rootScope, $location) { /* 监听路由的状态变化 */ $rootScope.$on ...
随机推荐
- 队列(存储结构数组)--Java实现
/*队列:其实也是一种操作受限的线性表 *特点:先进先出 *队尾指针:负责元素的进队 *队头指针:负责元素的出队 *注意:普通队--容易浪费空间,一般队列使用最多的就是循环队列--指针环绕 *队列的实 ...
- Linux系统Shell脚本编程
1. shell脚本概念:C语言编写的.命令解释器.编程语言. 是用户使用linux的桥梁. shell脚本语言非常擅长处理文本类型的数据. 2. shell脚本作用:自动化管理.监控管理.日志数据处 ...
- LeetCode 561. Array Partition I (数组分隔之一)
Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1 ...
- 解决 iframe 在 ios 上不能滚动的问题
HTML代码在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...
- 执行计划查看,autotrace工具的使用
---工具的简单介绍 001啥是autotrace,翻译自动跟踪,跟踪什么额? SQL的执行过程 我们老是讲ORACLE体系结构里面,共享池有个组件库高速缓存,存放SQL语句执行计划 什么 ...
- 数据库无法连接JDBC
解决:Connections could not be acquired from the underlying database! 博客分类: 问题解决 数据库 iBatis og4j:WARN ...
- 浅谈javascript的函数节流
什么是函数节流? 介绍前,先说下背景.在前端开发中,有时会为页面绑定resize事件,或者为一个页面元素绑定拖拽事件(其核心就是绑定mousemove),这种事件有一个特点,就是用户不必特地捣乱,他在 ...
- Spring学习日志之Bean的装配
Spring容器负责创建应用程序中的bean并通过依赖注入来协调这些对象之间的关系.但是,作为开发人员,要告诉Spring需要创建哪些bean并且如何将其装配在一起.当描述bean如何装配时,Spri ...
- CSS系列------选择器和选择器的优先级
1.1.基本选择器 通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...
- java的linux命令
1.查找文件find / -name filename.txt 根据名称查找/目录下的filename.txt文件.find . -name “*.xml” 递归查找所有的xml文件2.查看一个程序是 ...