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