推迟指令的执行，直到ng个选项完成

Defer execution of directive until ng-options completes

本文关键字：选项 ng 直到 指令 执行 推迟      更新时间：2023-09-26

我正在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});
        }
    }
})

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

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

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

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

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

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

相关文章：