angularjs 指令渲染完成后执行某个方法

 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 渲染完成），再执行下一个指令的渲染顺序，来实现的。