在AngularJS模板呈現後執行代碼

我有一張表格，呈現ng-repeat的行。在其中一個單元格中，有一個選擇使用ng-options呈現。在AngularJS模板呈現後執行代碼

<tr ng-repeat="item in data.items" repeat-done> 
<td > 
    ... 
    <select class="selectpicker" 
     ng-model="person" ng-options="person.Surname for person in data.Persons track by person.Id"> 
    <option value="">Introduce yourself...</option> 
    </select> 
    ... 
<td> 
</tr>

當重複完成時，我需要將select轉爲bootstrap-select（一個漂亮的下拉列表）。因此，經過一點研究，我添加了以下指令：

app.directive('repeatDone', function() { 
    return function (scope, element, attrs) { 
     if (scope.$last) { 
      setTimeout(function() { $('.selectpicker').selectpicker(); }, 1); 
     }; 
    }; 
});

它在tr處指定（參見上文）。

它的工作原理。但我有點擔心是否有機會在慢速PC /平板電腦等上無法正常工作。據我所知，AngularJS具有異步性質。因此，在處理ng-repeat的最後一個元素時，對於此元素仍可能有ng-options（或者對於某些先前的元素也可能）不會呈現。還是我偏執狂？

來源

2014-09-03 SiberianGuy

沒有可用[這裏]（https://github.com/joaoneto/angular-bootstrap-select），可以幫助一個指令包裝。 – 2014-09-03 12:08:55

你不應該使用超時來同步你的指令。會出現很多問題。

您可以使用選項優先排序何時將使用您的指令。指令以後代的順序執行。

ngRepeat優先1000（https://docs.angularjs.org/api/ng/directive/ngRepeat）選擇具有優先級0（https://docs.angularjs.org/api/ng/directive/select）

如果要聲明一個負的優先級就NG-選項後，將執行你的指令。

app.directive('repeatDone', function() { 
    return { 
     priority: -5, 
     link: function (scope, element, attrs) { 
      $('.selectpicker').selectpicker(); 
     } 
    } 
});

根據角文檔：

優先

當存在單個DOM元素上定義的多個指示，有時有必要指明該指令是順序應用。優先級用於在編譯函數被調用之前對指令進行排序。優先級被定義爲一個數字。首先編譯具有更大數字優先級的指令。預鏈接功能也按優先順序運行，但鏈接後鏈接功能按相反順序運行。具有相同優先級的指令的順序未定義。默認優先級爲0。

https://docs.angularjs.org/api/ng/service/ $編譯

來源

2014-09-03 12:35:18

試過了。似乎沒有工作 – SiberianGuy 2014-09-03 14:35:55

爲什麼它沒有工作？在ng-options之前執行了嗎？ – 2014-09-09 21:32:01

在AngularJS模板呈現後執行代碼

回答

相關問題