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

【问题标题】：Defer execution of directive until ng-options completes推迟执行指令直到 ng-options 完成
【发布时间】：2014-05-02 13:08:03
【问题描述】：

我正在使用以下标记在我的 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 生成的任何选项。如果我查看 Chrome 开发者工具中的原始 <select> 元素，虽然我可以看到正在生成选项。

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

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

【问题讨论】：

我认为指令上的priority 属性可以帮助您解决这个问题
如果可能的话，我建议您使用 Chosen 与 Angular 的集成。 This 可能是候选人。
实际上我刚刚意识到使用priority 并不能解决必须等待初始化Chosen 直到选项源对象可用之后的根本问题。我认为您应该先尝试@NikosParaskevopoulos 的建议

标签： javascript jquery angularjs jquery-chosen

【解决方案1】：

您可以毫无延迟地注入和使用 $timeout 将操作放在浏览器事件队列的末尾（在渲染引擎之后）：

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

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

【讨论】：