javascript - 使用 AngularJS，如何在视图和控制器同步特定更改后触发代码执行？

Question

具体来说，我在某些日期范围内将 AJAX 转换为一对 SELECT（使用 AngularJS ng-repeat 维护），然后我使用 jQuery UI 的 selectToUISlider 将其转换为滑块。我假设如果它正在运行的 SELECT 在运行时被修改，则 selectToUISlider 的行为是未定义的。有没有办法确保只有在 AngularJS 完成更新后才调用它？我还没有遇到任何问题，但我不确定我只是幸运，或者我的电脑没有在正确的时刻出现延迟，等等......

我可以想到两种解决方案，但似乎都不是很好：

• 不要使用 ng-repeater；使用 jQuery 构建 SELECT。但这将是可悲的。
• 使用 setTimeout 延迟对 selectToUISlider 的调用。但这似乎……不优雅。

Answer 1

我不知道 selectToUISlider 是如何工作的，但你想要一个指令。在该指令中， $watch 用于更改列表并更新滑块，但它应该完成。

http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$watch

示例 HTML：

<select jq-slider="myList" ng-options="item.val for item in myList"></select>

示例 JS：

myApp.directive('jqSlider', function() {
  return {
    link: function(scope, elm, attrs) {
      scope.$watch(attrs.jqSlider, function whenMyListChanges(newValue, oldValue) {
        $(elm).applySelectUISliderUpdateForNewValues();
      });
    }
  };
});