如何在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，來完成你的插件需要做的事情！