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>