AngularJs--ng-repeate渲染完毕后执行的代码

AngularJs呈现页面的原理
AnguarJs提供了一些对于Html进行加强的语义标签(directive)，这些标签在浏览器加载完页面后被执行。举例来说:

<div ng-controller="ctrl2">
    <input type="text" ng-model="page">
    <div repeat-finish ng-repeat="i in [1,2,3,4,5]">
        {{i}}
        <div ng-repeat="j in [1,2,3,4]">
            <div class="a{{i}}b{{j}}">
                son:{{i}}b{{j}}
            </div>
        </div>
    </div>
</div>

上面的ng-repeat，就是一个directive, 相当于一个for循环。在页面加载完成后，AngularJs会遍历users数据对象，来呈现(render)出这个table中的内容。

如何实现在render完成之后，执行Js脚本
当我们使用Jquery结合AngulraJs使用的时候，希望在render完table后，执行一段js脚本，把JqTable应用到该table上。在实际开发中，会经常碰到这样的需求，希望能够捕获到AngularJs渲染完成页面的事件。
要达到这个目的，我们需要为当前的app自定义directive:

app.directive("repeatFinish",function ($timeout) {
    return function ($scope, $element,$attrs) {
        if($scope.$last==true){
            $element.append("<hr/>");
            $timeout(function() {
                $scope.$emit('ngRepeatFinished');
            });
        }
    }
})

最后，补充上我们需要render完成之后的Js脚本:

app.controller('ctrl2',function ($scope) {
    $scope.page = 'b2'
    $scope.$on('ngRepeatFinished', function () {
        $scope.$watch("page",function () {
            for(var i=1; i<=5;i++){
                $(".a"+i+$scope.page).css("background","yellow");
            }
        })
    });
});