angularjs 渲染页面时,有时需要根据远程接口返回的数据结构来渲染:
请求远程数据--》数据模型变化--》angularjs监控到模型变化--》重新渲染页面。
那么有时需要在有数据且页面被渲染完成后,再执行某个方法,如:
semnatic 的 accrodion:
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
菜单名称
</div>
<div class="active content">
<ul >
<li><a href="">菜单1</a>
<li><a href="">菜单2</a>
<li><a href="">菜单3</a>
<li><a href="">菜单4</a>
</ul>
</div>
<div class=" title">
<i class="dropdown icon"></i>
菜单名称
</div>
<div class=" content">
<ul >
<li><a href="">菜单1</a>
<li><a href="">菜单2</a>
<li><a href="">菜单3</a>
<li><a href="">菜单4</a>
</ul>
</div>
</div>
<script>
$('.ui.accordion') .accordion();
</script>
需要执行accordion 方法才能显示出来。
通常菜单由数据来决定,改为angularjs 实现为:
<div ng-if="userModel.menuList.length>0" class="ui accordion " > <div ng-repeat="menuDir in userModel.menuList" > <div class="{{$first?'active':''}} title"> <i class="dropdown icon"></i> {{menuDir.menuName}} </div> <div class="{{$first?'active':''}} content"> <ul ng-repeat="menu in menuDir.childrens"> <li ><a ui-sref="/views/{{menu.menuUrl}}"> {{menu.menuName}}</a></li> </ul> </div> </div> </div>
页面在加载完后台数据,生成userModel.menuList数据,angularjs 监控到userModel.menuList数据变化,再渲染页面,在这执行完成后,再执行$('.ui.accordion') .accordion();,才能渲染出accordion校果。
那么如何实现在页面angularjs 渲染完成后,再执行方法呢?
一种指令实现的方式:
.directive('OnReanderFinsh',[function(){
return {
restrict:'A',
link:function ($scope, element, attrs, controller) {
var fun = $scope.$eval(attrs.OnReanderFinsh);//计算表达式的值
if(fun && typeof(fun)=='function'){
fun();
}
}
};
}]);
html页中引入指令的js,在 ng-repeat一行中修改:
<div ng-repeat="menuDir in userModel.menuList" on-reander-finsh="renderAccordion">
controller中修改:
$scope.renderAccordion = function (){
$('.ui.accordion') .accordion();
};
就是利用了一个指令完成(ng-repeat 渲染完成),再执行下一个指令的渲染顺序,来实现的。