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");            }        })    });});