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

Question

我正在尝试使用我的应用程序中的指令实现jQuery multiselect插件.这里是选择元素:

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

模型parties模型通过$ http加载.multiselect插件解析其中的option元素select并生成很好的多选.

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

这是我的指示:

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, ...)

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

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");
   });
});