angularjs - 如何查找更改正在监视的对象的调用站点

Question

AngularJS 允许监听对象的更改，并将调用提供给 $watch 函数的回调函数。对于像 ngGrid 这样使用 AngularJS 的大型库，对象经常被“监视”更改。

一旦调用了监视回调，如何追溯到导致对象发生更改的调用站点？

如果不知道是什么导致了变化，并因此导致了监视处理程序被调用，那么调试像 ngGrid 这样的库是非常困难的。我在所有可以预见变量可能更改的地方设置断点，然后尝试为执行管道构建一个图表，以跟踪导致对象更改的事件链。

Answer 1

你根本不能这么做。 $watch 只会添加一个回调来检查对象是否发生更改，并在摘要期间运行。

我想这是与像 Backbone 这样的框架的主要区别之一，您可以在其中扩展 Model 对象。

话虽这么说，你可能有意识地尝试$scope.$digest();(更新模型，并解雇观察者)会有更好的运气，但它是一段时间...

更新

问题是您认为 watch 和型号变化之间存在相关性，但事实并非如此。添加监视只是在摘要循环运行时添加要检查的内容。

此循环不是由 $scope 上的某些内容更改触发的，而是调用 $scope.$apply 或直接调用 $scope .$摘要.

请注意，大多数(全部？) Angular 指令和相关组件都会代表您调用 $scope.$apply。例如，$timeout 和 ngClick 之所以按预期工作，是因为它们在执行回调后在内部运行 $scope.$apply。

更新二

如果您只是想查找调用站点，这样的内容可以帮助您吗？

$scope.foo = {
  get bar () { return getting(); },
  set bar (value) { setting(value); }
};

var bar;

function setting (value) {
  var stack = getStack();
  console.log(value, stack);
  bar = value;
}

function getting () {
  console.log(getStack());
}

function getStack () {
  try {
    throw new Error('foo');
  } catch (e) {
    return e.stack || e;
  }
}