javascript - 推迟执行指令直到 ng-options 完成

Question

我正在使用以下标记在 Angular 模板中创建一个选择元素:

<select name="noOfPeople" ng-model="noOfPeople" ng-options="value for value in [] | range:12">
    <option value="">No of people*</option>
</select>

我想要向此选择元素添加一些自定义样式和功能，为此我使用 Chosen jQuery 库。

为了在选择元素上初始化 CHosen 库，我编写了以下指令:

directive('select', function() {
    return {
        restrict: 'E',
        link: function(scope, elm, attrs) {
            $(elm).chosen({disable_search: true});
        }
    }
})

这工作得非常好，Chosen 现已在所有 <select> 上初始化。我的应用程序中的元素。然而，这似乎不适用于使用 ng-options因为 Chosen 创建的 div 不包含 ng-options 生成的任何选项。如果我看原文<select> Chrome 开发者工具中的元素，但我可以看到正在生成选项。

我的理论是 Chosen 正在 <select> 上初始化Angular 有机会运行之前的元素 ng-options并创建<option> DOM 中的元素。

有没有办法可以推迟 Chosen 的初始化，直到 Angular 完成其处理并添加所有 <option>我想要的元素？

Answer 1

您可以毫无延迟地注入(inject)并使用 $timeout 将操作放在浏览器事件队列的末尾(渲染引擎之后):

app.directive('select', function($timeout) {
  return {
    restrict: 'E',
    link: function(scope, elm, attrs) {
      $timeout(function() {
        $(elm).chosen({
          disable_search: true
        });
      });
    }
  };
});

请注意，这种情况假设 ngOptions 的数据在初始化时可用，并且不是异步检索的。