浅谈angular.js中实现双向绑定的方法$watch $digest

介绍Angular中的数据绑定奥秘：$watch，$apply和$digest协同工作

每一个Angular开发者都深知数据绑定在框架中的核心地位，而为了深入理解其背后的机制，我们必须$watch，$apply和$digest这三个关键组件。它们协同工作，构建了一个强大的数据响应系统，确保视图与数据的同步。

我们来理解$watch的工作原理。在Angular中，每一个作用域（scope）都拥有一个观察者列表，也就是$watch的集合。这些观察者负责监控特定的数据变化。一旦数据发生变化，相应的$watch就会触发一个事件，通知作用域数据已经改变。这就是数据变化传播到视图的基础机制。

接下来是$apply方法。在Angular中，我们经常会看到这样的代码：scope.$apply(function(){...})。这是因为当我们从外部改变了一个数据（比如通过Ajax请求获取新的数据），这些数据并没有经过Angular的digest过程，所以视图不会立即更新。我们需要调用$apply方法，手动启动一个digest过程，让Angular知道数据已经改变，并更新视图。

那么，$digest在这个过程中扮演什么角色呢？其实，$digest是一个遍历所有$watch并执行相应处理函数的过程。当数据发生变化时，所有相关的$watch都会被触发，然后执行相应的处理函数。在这个过程中，Angular会对比新旧数据，判断哪些数据发生了变化，并据此更新视图。这就是数据绑定在Angular中的实现方式。

Angular.js中的双向绑定奇迹

在Angular.js这一强大的框架中，双向数据绑定无疑是一个令人惊叹的特性。它使得视图与数据之间的交互变得如此流畅和实时，仿佛魔法一般。那么，这一切是如何实现的呢？

这一切都要归功于Scope和三个重要的方法：$watch、$digest和$apply。

让我们了解一下$watch。这是一个监听Scope上数据的监听器。通过创建监听器，我们可以监视特定属性的变化。例如，如果我们想监听$scope.name属性的变化，我们可以这样写：

```javascript

$scope.$watch('name', function(newValue, oldValue) {

// 逻辑处理

});

```

当'name'属性发生变化时，这个回调函数就会被触发，新的值和旧的值作为参数传入。

接下来是$digest，它的职责是检查Scope中的数据是否发生了变化。如果某个属性有变动，它就会立即通知该属性的监听器，触发监听器执行回调函数。

而$apply方法与$digest相似，但它们的关注点略有不同。$digest主要检查一个Scope及其子Scope中的所有数据，而$apply则更关注rootScope，它会从父级到子级检查所有数据。在实际应用中，我们通常更倾向于使用$apply，因为它具有更广泛的覆盖范围。值得注意的是，Angular.js通常不会直接调用$digest，而是使用$scope.$apply()来代替。

那么，如果没有设置监视器，为什么视图和数据还能实现双向绑定呢？这背后的秘密在于Angular.js的自动监听机制。当我们使用ng-model定义一个文本框时，Angular.js会在$scope模型上自动为相应的属性设置一个监听器。这意味着视图和数据的双向绑定实际上是在背后默默进行的。这种自动监听机制确保了数据的实时更新和视图的响应。

但有时你可能会发现，尽管数据已经改变，但UI却没有刷新，是不是双向绑定失效了呢？实际上并没有失效。这种情况通常发生在异步操作中，比如setTimeout或者异步回调函数中修改模型数据。由于这些操作可能会错过当前的$scope模型的digest循环，导致模型未能及时通知UI进行刷新。为了解决这个问题，我们可以手动调用$apply方法来触发一次数据检查，实现双向绑定。例如：

```javascript

setTimeout(function() {

$scope.name = '一介布衣';

$scope.$apply();

}, 2000);

```

值得注意的是，在某些情况下，我们无需手动调用$apply方法。Angular.js已经为一些指令和服务（如ng-click、ng-model、$timeout服务和$http服务等）自动实现了$apply()方法。这些指令和服务在调用后会自动触发数据双向绑定。何时需要手动调用$apply方法取决于具体的场景和需求。理解这一点对于有效利用Angular.js的双向绑定功能至关重要。