今天工作中遇到需要用到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>

Demo

angular指令监听ng-repeat渲染完成后执行自定义事件方法的更多相关文章

  1. 利用angular指令监听ng-repeat渲染完成后执行脚本

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

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

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

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

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

  4. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  5. c# 获取移动硬盘信息、监听移动设备的弹出与插入事件

    原文 http://www.cnblogs.com/coolkiss/p/3328825.html 备忘一下改功能,主要通过WMI来实现,对于监听外接设备的弹出和插入事件一开始使用IntPtr Wnd ...

  6. JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...

  7. bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式)

    bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式) 一.总结 一句话总结:通过监听滚动的高,判断滚动的高是否大于元素距离顶端的距离 1.如何知道屏幕滚动的高? st=$ ...

  8. Ogre 监听类与渲染流程

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

  9. angular 全局 监听路由变化

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

随机推荐

  1. QQ顶部的消息,联系人切换

    高仿ios SegmentView 以前做过的一个项目美工设计的页面包含这个控件,和QQ消息页面顶部的效果一样,其实,这个控件是ios7的分段控制,android没有这个控件,不过实现起来也比较简单, ...

  2. ThreeJS之动画交互逻辑及特效

    工作需要,研究了一下 threejs 简单逻辑动画交互方法.写了一个小示例,分享一下,挺丑的. 第一步 当然就是初始化 threejs 的渲染场景了. var camera; //相机 var sce ...

  3. 关于VRTK的使用(一)—— VR开发环境搭建

    首先在Hierarchy窗口中添加GameEmpty,并重命名为VRTK.然后给VRTK添加一个子容器命名为SteamVR.从Asset Store导入SteamVR Plugin: 然后分别选中预制 ...

  4. 实现响应式——Bootstrap的删格系统详解

    Bootstrap 今天和大家一起学习如今很流行的前端框架之一,Bootstrap框架. 前言 今天带大家看看Bootstrap框架,其实我呢主要还是用里面的删格系统,单单这个删格系统就比较强大了.其 ...

  5. 【Win 10 应用开发】UI Composition 札记(一):视图框架的实现

    在开始今天的内容之前,老周先说一个问题,这个问题记得以前有人提过的. 设置 Windows.ApplicationModel.Core.CoreApplicationView.TitleBar.Ext ...

  6. 给资源文件添加指纹(Gulp版)

    至于为什么要费尽心思地给文件添加指纹,请参看前端静态资源缓存控制策略.这次要达到的小目标就是生成的资源文件能够被客户端缓存,而在文件内容变化后,能够请求到最新的文件. 需要用到的 gulp 插件是 g ...

  7. 机器学习之二:K-近邻(KNN)算法

    一.概述 K最近邻(k-Nearest Neighbor,KNN)分类算法,是一个理论上比较成熟的方法,也是最简单的机器学习算法之一.该方法的思路是:如果一个样本在特征空间中的k个最相似(即特征空间中 ...

  8. Linux crontab定时器设置(定期执行java程序)(转)

    Crontab 语法 Crontab语法一个crontab文件用五个段来定义:天,日期和时间,和一个要定期执行的命令代码. *    *  *  *   *  command to be execut ...

  9. HDU 6121 Build a tree(找规律+模拟)

    Build a tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others)To ...

  10. OR in Matrix

    OR in Matrix Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submi ...