AngularJS的$ scope.watch函数没有触发数据修改

Question

您可以通过Chrome或FireFox的控制台打开此插件中的问题：

http://plnkr.co/edit/jmDcxqQ48PmeHt3EPVMU

点击“推送！”第一次，watch函数不执行。但如果你再次推它，它确实会执行。这就像它忽略了第一次推动。但是，由于在后台执行的超时功能，您可以清楚地看到第一次推送后dataPoints数组更改。更奇怪的是，如果你注释掉jQuery fadeIn包装器，代码将按预期工作（watch函数在第一个按钮上执行）。

这里发生了什么？为什么使用jQuery（）。fadeIn时$ watch函数没有执行？

Answer 1

jQuery('#mytest').fadeIn(200, function() {
    $scope.mydata.dataPoints.push(1);
    $scope.$$phase || $scope.$apply();
})

当fadeIn回调运行时，它会在“Angular”外部运行，因此我们需要调用$scope.$apply()来运行digest cycle。但是，如果对象已经可见，则jQuery似乎立即运行回调（因此我们仍然在“Angular”内部），因此我们不需要（也不应该）调用$scope.$apply()。

处理这两种情况的简单方法是使用私有属性$$phase检查我们是否已经处于摘要周期。如果div已经可见，则更清晰的实现是不调用fadeIn()。