javascript - 我如何确定 ng-options 何时完成更新 DOM？

Question

我正在尝试在我的应用程序中使用一个指令来实现 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");
            });
        }
    }
});

Answer 1

如评论中所述，使用

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

我不确定 watch 何时触发以及 ngOptions 何时更新 DOM。如果发现 watch 触发过早，可以尝试使用$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");
   });
});