如何确定ng选项何时完成更新DOM？

我试图在我的应用程序中使用指令来实现jQuery multiselect插件。下面是选择元素：如何确定ng选项何时完成更新DOM？

<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元素何时填充选项，以便我可以告诉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"); 
      }); 
     } 
    } 
});

来源

2013-03-12 lucassp

内，您的$手表，尝试调用$超时 - 即，把多选东西超时回调函数内。这可能会让ng-options指令有机会运行并将选项添加到DOM。 – 2013-03-12 19:43:55

这不起作用。我是否正确设置了$ watch？ – lucassp 2013-03-12 20:05:44

它看起来对我好。我不确定我的建议是否可行。渲染完成后，Angular没有任何方法可以发出信号。有时$超时有效，但并非总是如此。 – 2013-03-12 20:08:42

正如在评论中讨论的那样，使用

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

我不知道当手表触发VS时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"); 
    }); 
});

来源

2013-03-13 18:41:22

这不适用于Angular 1.5.6，它在DOM更新之前触发。有任何想法吗？！ – Campbeln 2016-06-03 07:28:21

如何确定ng选项何时完成更新DOM？

回答

相关问题