利用angular指令监听ng-repeat渲染完成后执行函数

很多时候,我们需要在ng-repeat渲染完成后再对其进行操作,那么怎么知道什么时候渲染完成呢?

今天工作中就遇到了这个问题,在网上查了一下,感谢大神的无私分享,整理了一下,加深记忆

1.在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,我们可以通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$last的值:自定义指令

指令能够复用最好,可以通过给指令指定一个处理函数renderFinish

{{item.str}}

再通过指令的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表达式的,通过它处理函数得以执行,这样,指令用在不同的地方,可传递不同的处理函数。


2.使用$timeout也可以达到效果(我感觉此方法比1方法好用),下面是代码

app.directive('timeOut',function($timeout){return { link: function(scope,element,attr){ $timeout(function(){ //这里是要执行的代码},0) } } 
});



本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部