如何在angular中把DOM加载完成后再调用指定函数

下面是个网页片段，

 
                
                    
                 
          {{row.turntest_name}}
        

                    
                    

                         {{row.profile}} 
                    
                    
                 
         {{ row.updated | date:'yyyy-MM-dd HH:mm:ss'}}
        
                    
                    
                
                    {{row.baseline}}
                 
                      
                        

                            
                                请选择基线
                            

{{row.explain}} 配置   查看   删除   修改  

因为用到了angular的select2这个插件（指令），select2用在了ng-repeat内部，select2的效果没有显示出来，所以需要再DOM加载完成后调用初始化函数，才能正常显示。

于是，我在Html页面头部加载了下面的代码：

<script type="text/javascript">
    $(document).ready(function () {
       $(".js-example-basic-single").select2();
      });
   
script>

加上了上面这段代码后，select2的效果还是没有显示出来，这个标签放在了ng-repeat的外面的话，就可以正常加载插件的效果，所以，我猜想应该是初始化函数的问题。

于是，百度了一下，有大神指出需要用在ng-repeat 结束以后触发初始化函数。找到了原因，参考大神的方法，解决方法如下：

先定义指令：

app.directive('onFinishRender',function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                    // scope.isSelectShow = false;
                });
            }
        }
    }
});

然后再在控制器中进行监听，并调用初始化函数

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {

      var select = document.getElementById('mySelect');
              console.log(select);
        select.style ="width:100%;height:34px";
       
       $(".js-example-basic-single").select2();


});

然后再在Html页面绑定：

<tbody ng-repeat="row in convertdisplayed|filter:filter |paging:page.index:page.size"
       on-finish-render="ngRepeatFinished">

这个做法其实也就是用一个directive 来监听 ng-repeat 是否结束。这个问题的原因是：不应该将jquery插件和angular混用，这样做的话就会出现许多像现在这样要处理的麻烦。正确的做法是写一个directive，来完成你的插件需要做的事情！