Question

我有一个表格，用ng-repeat呈现行。在其中一个单元格中，有一个使用ng-options呈现的选择。

<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对此元素（或者也可能对某些先前元素也是如此）进行渲染。或者我是偏执狂吗？

Answer 1

您不应该使用超时同步指令。可能会出现很多问题。

您可以使用选项 priority 来排序何时使用您的指令。指令按后代顺序执行。

ngRepeat优先级为1000（https://docs.angularjs.org/api/ng/directive/ngRepeat） select的优先级为0（https://docs.angularjs.org/api/ng/directive/select）

如果您声明您的指令具有否定优先级，它将在ng-options之后执行。

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

根据Angular文档：

优先

当在单个DOM元素上定义了多个指令时，   有时需要指定指令的顺序   适用。优先级用于在指令之前对指令进行排序   编译函数被调用。优先级定义为数字。   首先编译具有更高数字优先级的指令。   预链接功能也按优先级顺序运行，但后链接   函数以相反的顺序运行。指令的顺序与   相同的优先级未定义。默认优先级为0。

https://docs.angularjs.org/api/ng/service/ $编译

渲染AngularJS模板后执行代码

1 个答案: