我正在尝试在我的应用程序中使用一个指令来实现 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");
});
}
}
});
最佳答案
如评论中所述,使用
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");
});
});
关于javascript - 我如何确定 ng-options 何时完成更新 DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15369452/