angularjs - AngularJS 多个 $watch 导致控制器初始化时出现多个请求

Question

考虑以下代码；

function ListCtrl($scope){

  this.fetchResults = function(){};

  // so I can pass this as a reference & spyOn fetchResults
  function fetchResults = function(){return this.fetchResults()}.bind(this);

  $scope.page = 1;
  $scope.order = null;

  $scope.$watch('page',fetchResults);
  $scope.$watch('order',fetchResults);

  this.fetchResults();

}

我想以这种方式编写这段代码，这样我就可以测试每个手表是否触发fetchResults. 但是这样，当ListCtrl被初始化时，它调用了fetchResults3次

1. 显式调用
2. 为了$watch('page')
3. 为了$watch('order')

我该怎么做才能在初始化时只ListCtrl拨打fetchResults一次电话？

Answer 1

来自$scope.$watch 文档：

在观察者注册到作用域后，监听器 fn 被异步调用（通过 $evalAsync）来初始化观察者。在极少数情况下，这是不可取的，因为当 watchExpression 的结果没有改变时调用了侦听器。要在侦听器 fn 中检测这种情况，您可以比较 newVal 和 oldVal。如果这两个值相同（===），则由于初始化而调用了侦听器。

所以你可以做这样的事情：

function watchFetchResults(newValue, oldValue) {
  if(newValue !== oldValue){
    fetchResults();
  }
}

$scope.$watch('page',watchFetchResults);
$scope.$watch('order',watchFetchResults);

Answer 2

你也可以这样做：

$scope.$watch('page + order', fetch);

这将同时观察两个表达式，只需将它们连接成一个角度表达式。