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

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

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

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

指令能够复用最好，可以通过给指令指定一个处理函数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表达式的，通过它处理函数得以执行，这样，指令用在不同的地方，可传递不同的处理函数。

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

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