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

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/2391658/blog/1931036

angular指令监听ng-repeat渲染完成后执行自定义事件方法相关推荐

vue之 watch 监听数据变化 watch的使用、watch监听数据加载完成后执行、watch不触发、不生效的解决办法及原理
常用方法: watch监听数据完成后执行函数: watch: {huxing: {handler: function(newVal, oldVal) {this.huxingW();},deep: t ...
angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法
用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...
JavaScript监听手机物理返回键的两种解决方法
JavaScript监听手机物理返回键的两种解决方法参考文章: (1)JavaScript监听手机物理返回键的两种解决方法 (2)https://www.cnblogs.com/xzzzys/p/8 ...
java中的actionlistener_JAVA事件监听器之BUTTON类中的ADDACTIONLISTENER(ACTIONLISTENER L)方法...
JAVA:事件监听器之Button类中的addActionListener(ActionListener l)方法 addActionListener public void addActionLis ...
Angular @Effect监听指定Action类型的实现原理
Ngrx里action的职责就是express unique events & intents. 源代码: @Effect()searchBookICanbeAnyName$: Observa ...
自定义指令监听多个div_Vue 3 | 自定义指令的新玩法
开门见山按照惯例,从上帝视角看一下自定义指令在 Vue 3 中发生了哪些改变: 自定义指令的 API 改了名字,名字更贴近组件的生命周期自定义指令可以通过子组件的 v-bind="$a ...
mysql8.0 本地监听端口_mysql8.0启动后不能正常监听端口的问题处理
mysql8.0启动后不能正常监听端口的问题处理 1.确定问题 mysql > show variables like '%port%'; 发现是0 mysql> SHOW VARIABL ...
监听js变量的变化_Node.js从零开始——事件、系统和流
毕竟不是一个真正的教程,这里主要还是以普及和介绍为主,所以这一部分就是 Node.js 的其他部分介绍了,主要也就是事件触发.操作系统以及流的知识. 1 事件触发器因为我们之前在浏览器中使用 Jav ...
java监听com口_简单了解Java接口+事件监听机制
1.接口: 定义方法: public interface interName //extends interName2, interName3...可继承多个接口在接口里只能定义常量和抽象方法. p ...

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

angular指令监听ng-repeat渲染完成后执行自定义事件方法相关推荐

最新文章

热门文章