理解$watch ，$apply 和 $digest --- 理解数据绑定过程

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

AngularJs 专栏收录该内容

7 篇文章

订阅专栏

本文通过一个具体的示例解释了在AngularJS中为何有时点击事件不会触发视图更新。这是因为点击事件未被封装进$apply函数，导致$digest循环未执行。文章展示了如何通过手动调用$apply来解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文档：http://www.angularjs.cn/A0a6

1、Angular什么时候不会自动为我们$apply

2、这是Angular新手共同的痛处。为什么我的jQuery不会更新我绑定的东西呢？因为jQuery没有调用$apply，事件没有进入angular context，$digest循环永远没有执行。

我们来看一个有趣的例子：

假设我们有下面这个directive和controller

app.js

app.directive('clickable', function() {

return {
  restrict: "E",
  scope: {
    foo: '=',
    bar: '='
  },
  template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
  link: function(scope, element, attrs) {
    element.bind('click', function() {
      scope.foo++;
      scope.bar++;
    });
  }
}

});

app.controller('MainCtrl', function($scope) {
  $scope.foo = 0;
  $scope.bar = 0;
});

3、它将foo和bar从controller里绑定到一个list里面，每次点击这个元素的时候，foo和bar都会自增1。

那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$apply里面的常见的事件，这意味着我们会失去我们的计数吗？不会

真正的结果是：$scope确实改变了，但是没有强制$digest循环，监视foo 和bar的$watch没有执行。也就是说如果我们自己执行一次$apply那么这些$watch就会看见这些变化，然后根据需要更新DOM。

试试看吧：http://jsbin.com/opimat/2/

如果我们点击这个directive（蓝色区域），我们看不到任何变化，但是我们点击按钮时，点击数就更新了。如刚才说的，在这个directive上点击时我们不会触发$digest循环，但是当按钮被点击时，ng-click会调用$apply，然后就会执行$digest循环，于是所有的$watch都会被检查，当然就包括我们的foo和bar的$watch了。

现在你在想那并不是你想要的，你想要的是点击蓝色区域的时候就更新点击数。很简单，执行一下$apply就可以了：

4、

element.bind('click', function() {
  scope.foo++;
  scope.bar++;

  scope.$apply();
});

5、