Question

我在Angular模板中使用以下标记创建一个select元素：

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

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

要在select元素上初始化CHosen库，我已经写了这个指令：

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

这非常有效，现在我的应用程序中的所有<select>元素都已初始化了Chosen。但是，这似乎与使用ng-options无关，因为Chosen创建的div不包含ng-options生成的任何选项。如果我查看Chrome浏览器开发人员工具中的原始<select>元素，但我可以看到正在生成这些选项。

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

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

Answer 1

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

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

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

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

1 个答案: