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

Posted 2023-05-09

【中文标题】使用 AngularJS，如何在视图和控制器同步特定更改后触发代码执行？

【英文标题】：With AngularJS, how to trigger code to be executed after the view and controller have synced a particular change?

【发布时间】：2012-07-28 14:09:27

【问题描述】：

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

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

不要使用 ng-repeater；使用 jQuery 构建 SELECT。但不得不这样做会很遗憾。 使用 setTimeout 延迟对 selectToUISlider 的调用。但这似乎……不优雅。

【参考方案1】：

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

http://docs.angularjs.org/api/ng.$rootScope.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();
      );
    
  ;
);

【讨论】：

啊，很有前途！谢谢！我唯一不确定的是：selectToUISlider 是建立在两个 SELECTs 之上的。一个代表范围的起始值，另一个代表结束值。假设AngularJS按照它们出现在页面上的顺序更新HTML元素是否安全？我可以将指令绑定到第二个 SELECT 并知道第一个也已更新吗？