如何在 AngularJS 中使用 $scope.$watch 和 $scope.$apply？

在 AngularJS 中，我们更新我们的模型，我们的视图/模板“自动”更新 DOM（通过内置或自定义指令）。

$apply 和 $watch 都是 Scope 方法，与 DOM 无关。

Concepts 页面（“运行时”部分）很好地解释了 $digest 循环、$apply、$evalAsync 队列和 $watch 列表。这是文本随附的图片：

https://i.stack.imgur.com/O1iSG.png

任何可以访问范围的代码——通常是控制器和指令（它们的链接函数和/或它们的控制器）——都可以设置一个“watchExpression”，AngularJS 将针对该范围进行评估。每当 AngularJS 进入它的 $digest 循环（特别是“$watch list”循环）时，就会发生这种评估。你可以观察单个作用域属性，你可以定义一个函数来同时观察两个属性，你可以观察一个数组的长度，等等。

当事情发生在“AngularJS 内部”时——例如，你输入一个启用了 AngularJS 双向数据绑定的文本框（即，使用 ng-model），触发一个 $http 回调等等——$apply 已经被调用了，所以我们'在上图中的“AngularJS”矩形内。所有 watchExpressions 都将被评估（可能不止一次——直到没有检测到进一步的变化）。

当事情发生在“AngularJS 之外”时——例如，你在指令中使用了 bind()，然后该事件触发，导致你的回调被调用，或者一些 jQuery 注册的回调被触发——我们仍然在“Native”矩形中。如果回调代码修改了任何 $watch 正在观察的东西，调用 $apply 进入 AngularJS 矩形，导致 $digest 循环运行，因此 AngularJS 会注意到变化并发挥它的魔力。

---

AngularJS 扩展了这个 events-loop，创建了一个叫做 AngularJS context 的东西。

$手表()

每次在 UI 中绑定某些内容时，您都会在 $watch 列表中插入一个 $watch。

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

这里我们有 $scope.user，它绑定到第一个输入，我们有 $scope.pass，它绑定到第二个输入。为此，我们将两个 $watch 添加到 $watch 列表。

当我们的 template 被加载时，也就是链接阶段，编译器将查找每个指令并创建所有需要的 $watches。

AngularJS 提供 $watch、$watchcollection 和 $watch(true)。下面是一个简洁的图表，解释了 watchers in depth 中的所有三个。

https://i.stack.imgur.com/7AaPl.png

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });

  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });

  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);

  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();

     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}

http://jsfiddle.net/2Lyn0Lkb/

$digest 循环

当浏览器接收到可由 AngularJS 上下文管理的事件时，将触发 $digest 循环。这个循环由两个较小的循环组成。一个处理 $evalAsync 队列，另一个处理 $watch list。 $digest 将遍历我们拥有的 $watch 列表

app.controller('MainCtrl', function() {
  $scope.name = "vinoth";

  $scope.changeFoo = function() {
      $scope.name = "Thalaivar";
  }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

这里我们只有一个 $watch，因为 ng-click 不会创建任何监视。

我们按下按钮。

浏览器接收到一个将进入 AngularJS 上下文的事件。 $digest 循环将运行并询问每个 $watch 的变化。由于正在监视 $scope.name 更改的 $watch 报告了更改，因此它将强制执行另一个 $digest 循环。新循环不报告任何内容。浏览器取回控制权并更新 DOM 以反映 $scope.name 的新值 这里重要的是每个进入 AngularJS 上下文的事件都将运行 $digest 循环。这意味着每次我们在输入中写一个字母时，循环都会运行检查此页面中的每个 $watch。

$申请（）

如果您在触发事件时调用 $apply，它将通过角度上下文，但如果您不调用它，它将在它之外运行。就是这么简单。 $apply 将在内部调用 $digest() 循环，并遍历所有手表以确保 DOM 使用新更新的值进行更新。

$apply() 方法将触发整个 $scope 链上的观察者，而 $digest() 方法将仅触发当前 $scope 及其 children 上的观察者。 当没有更高级别的 $scope 对象需要了解本地更改时，您可以使用 $digest()。

---

我发现了涵盖 $watch、$apply、$digest 和摘要周期的非常深入的视频：

AngularJS - 了解 Watcher、$watch、$watchGroup、$watchCollection、ng-change

AngularJS - 了解摘要循环（摘要阶段或摘要过程或摘要循环）

AngularJS 教程 - 理解 $apply 和 $digest（深入）

以下是这些视频中用于解释概念的几张幻灯片（以防万一，如果上述链接被删除/不起作用）。

https://i.stack.imgur.com/XAR8i.png

在上图中，“$scope.c”没有被监视，因为它没有用于任何数据绑定（在标记中）。将监视另外两个（$scope.a 和 $scope.b）。

https://i.stack.imgur.com/ioG04.png

从上图中：AngularJS 根据各自的浏览器事件捕获事件，执行摘要循环（遍历所有监视以进行更改），执行监视函数并更新 DOM。如果不是浏览器事件，可以使用 $apply 或 $digest 手动触发摘要循环。

关于 $apply 和 $digest 的更多信息：

https://i.stack.imgur.com/LuBhi.png

---

还有 $watchGroup 和 $watchCollection。具体来说，如果您想调用函数来更新在非 dom 对象的视图中具有多个属性的对象，例如画布中的另一个视图、WebGL 或服务器请求，$watchGroup 非常有用.

这里是文档 link。

---

读完以上所有内容，无聊而困倦（对不起，但这是真的）。非常技术性，深入，详细和干燥。我为什么要写作？因为 AngularJS 非常庞大，许多相互关联的概念会让任何人发疯。我经常问自己，我不够聪明，无法理解他们吗？不！这是因为很少有人能用一种没有所有术语的傻瓜语言来解释这项技术！好吧，让我试试：

1）它们都是事件驱动的东西。 （我听到笑声，但请继续阅读）

如果您不知道什么是事件驱动然后认为您在页面上放置了一个按钮，使用“单击时”将其与功能挂钩，等待用户单击它以触发您在页面中植入的操作功能。或者想想 SQL Server / Oracle 的“触发器”。

2） $watch 是“点击”。

有什么特别之处在于它需要 2 个函数作为参数，第一个给出事件的值，第二个考虑值...

3) $digest 是不知疲倦地到处检查的老板，bla-bla-bla 但是一个好老板。

4) $apply 为您提供手动操作的方式，例如防故障（如果单击不启动，则强制它运行。）

现在，让我们让它可视化。想象一下，这样更容易抓住这个想法：

在一家餐馆，

- 服务员

应该接受客户的订单，这是

$watch(
  function(){return orders;},
  function(){Kitchen make it;}
);

- 经理 跑来跑去确保所有服务员都醒着，对客户的任何变化迹象做出反应。这是$digest()

- OWNER 拥有根据要求驾驶所有人的终极权力，这就是 $apply()

---