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

下面是个网页片段，

 <tbody ng-repeat="row in convertdisplayed|filter:filter |paging:page.index:page.size"
                       on-finish-render="ngRepeatFinished">
                <tr>
                    <td align="left">
                 <span editable-textarea="row.turntest_name" e-name="turntest_name" e-form="rowform"
                       onbeforesave="checkName($data, row.turntest_id)">
          {{row.turntest_name}}
        </span>

                    </td>
                    <td align="left">

                        <span> {{row.profile}} </span>
                    </td>
                    <td align="left">
                 <span editable-text="row.updated" e-name="updated" e-form="rowform"
                       onbeforesave="checkName($data, row.turntest_id)">
         {{ row.updated | date:'yyyy-MM-dd HH:mm:ss'}}
        </span>
                    </td>
                    <td align="left">
                <span ng-if="!rowform.$visible">
                    {{row.baseline}}
                 </span>
                      
                        <div ng-show="rowform.$visible">
                            <select ng-model="row.baseline" id="mySelect"
                                    class="js-example-basic-single form-control"
                                    ng-options="baseline for baseline in baselines "
                                    style="height: 100px;width: 50%">
                                <option value="">请选择基线</option>
                            </select>

                           <!--上面这个select用了一个angular的指令，select2--->     
                        </div>


                    </td>
                    <!--<td align="left">-->
                    <!--<span editable-text="row.turntask" e-name="turntask" e-form="rowform"-->
                    <!--onbeforesave="checkName($data, row.turntest_id)">-->
                    <!--{{row.turntask}}-->
                    <!--</span>-->


                    <td align="left">
                 <span editable-textarea="row.explain" e-name="explain" e-form="rowform"
                       e-rows="3" e-cols="10" onbeforesave="checkName($data, row.turntest_id)">
                     <span class="font-wrap">{{row.explain}}</span>
        </span>

                    </td>
                    <td align="left" class="{{ row.status }}">
                        <a ng-if="row.edit" class="name"
                           ui-sref="app.configconvert({id:'{{ work_team_id }}',convertId:'{{row.turntest_id}}',testtype:'{{type}}'})"
                           style="color: #4A75A0;font-size: 14px;font-family: MicrosoftYaHei">配置  </a>
                        <a class="name" ng-click="showTable(row)"
                           style="color: #4A75A0;font-size: 14px;font-family: MicrosoftYaHei">查看  </a>
                        <a class="name" ng-click="deleteRow(row)"
                           style="color: #4A75A0;font-size: 14px;font-family: MicrosoftYaHei"
                        >删除  </a>
                        <a ng-if="row.edit" ng-show="!rowform.$visible" class="name"
                           ng-click="rowform.$show();defaultItem(row)"
                           style="color: #4A75A0;font-size: 14px;font-family: MicrosoftYaHei">修改  </a>
                        <form editable-form name="rowform"
                              onbeforesave="saveItem($data, row,rowform)"
                              ng-show="rowform.$visible" class="form-buttons form-inline"
                              shown="inserted == row">
                            <button type="submit" ng-disabled="rowform.$waiting" title="保存"
                                    class="btn btn-sm btn-default ">
                                <em class="fa fa-save"></em>
                            </button>
                            <button type="button" ng-disabled="rowform.$waiting"
                                    ng-click="rowform.$cancel();resetDefault(row)"
                                    title="取消" class="btn btn-sm btn-default">
                                <em class="fa fa-times"></em>
                            </button>
                        </form>


                    </td>

                </tr>
           
                </tbody>

因为用到了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，来完成你的插件需要做的事情！