如何确定 ng-options 何时完成更新 DOM？答案

【问题标题】：How can I determine when ng-options has finished updating the DOM?如何确定 ng-options 何时完成更新 DOM？
【发布时间】：2013-03-12 18:40:16
【问题描述】：

我正在尝试使用我的应用程序中的指令来实现 jQuery 多选插件。这里是选择元素：

<select multiple 
        ng-model="data.partyIds" 
        ng-options="party.id as party.name for party in parties" 
        xs-multiselect="parties">
</select>

模型parties模型是通过$http加载的。多选插件解析select 内的option 元素并生成漂亮的多选。

有没有办法检测select 元素何时填充了选项，以便我可以告诉多选插件更新其数据？

这是我的指令：

machineXs.directive("xsMultiselect", function() {
    return {
        restrict: "A",
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.multiselect().multiselectfilter();
            scope.$watch(scope[attrs["xsMultiselect"]], function() {
                // I tried watching but it doesn't help
                element.multiselect('refresh');
                element.multiselectfilter("updateCache");
            });
        }
    }
});

【问题讨论】：

在你的 $watch 中，尝试调用 $timeout ——即将多选的东西放在超时回调函数中。这可能会让 ng-options 指令有机会运行并将选项添加到 DOM。
它不工作。我是否正确设置了 $watch？
我觉得没问题。我不确定我的建议是否可行。当渲染完成时，Angular 并没有任何方式发出信号。有时 $timeout 有效，但并非总是如此。
这些可能会给你一些想法：Lucas 将chosen 包装在一个指令中：blog post; whiteb0x 将 select2 包装在一个指令中：stackoverflow.com/questions/15212530/…
是的，AngularJS UI select2 指令是值得考虑的。如果我没有很快找到一些东西，我将不得不实现类似的东西。

标签： javascript mvvm angularjs angularjs-directive

【解决方案1】：

如 cmets 中所述，使用

scope.$watch(attrs.xsMultiselect, ...)

我不确定手表何时触发与 ngOptions 何时更新 DOM。如果您发现手表触发过早，可以尝试使用$evalAsync() 或$timeout()。 $evalAsync 将稍后执行，但在 DOM 呈现之前。 $timeout() 将在 DOM 渲染之后执行。

scope.$watch(attrs.xsMultiselect, function() {
   scope.$evalAsync(function() {
      element.multiselect('refresh');
      element.multiselectfilter("updateCache");
   });
});

或者，在 DOM 渲染之后：

scope.$watch(attrs.xsMultiselect, function() {
   $timeout(function() {
      element.multiselect('refresh');
      element.multiselectfilter("updateCache");
   });
});

【讨论】：

这在 Angular 1.5.6 中不起作用，它在 DOM 更新之前触发。有什么想法吗？！