如何使用$scope $watch和$scope $apply in AngularJS？

摘要周期和$范围

首先，AngularJS定义了所谓的摘要循环的概念。这个循环可以被认为是一个循环，在此循环期间，AngularJS检查所有$ scope所监视的所有变量是否有任何变化。因此，如果你在你的控制器中定义了$ scope.myVar，并且这个变量被标记为被监视，那么你隐含地告诉AngularJS在循环的每次迭代中监视myVar的变化。

一个自然的后续问题是：是否所有附加到$ scope的都被监视？幸运的是，没有。如果你要监视$ scope中每个对象的变化，那么很快，一个摘要循环需要花费很长时间来评估，你很快就会遇到性能问题。这就是为什么AngularJS团队给我们两种方法来声明一些$ scope变量作为被监视(阅读下面)。

$ watch有助于监听$ scope更改

有两种方法可以将$ scope变量声明为被监视。

>通过表达式 {{myVar}}在您的模板中使用它
>通过$ watch服务手动添加

广告1)
这是最常见的情况，我相信你以前看过它，但你不知道这已经在后台创建了一个手表。是的，它有！使用AngularJS指令(例如ng-repeat)也可以创建隐式监视。

广告2)
这是你如何创建自己的手表。 $ watch服务帮助您在附加到$ scope的某些值已更改时运行一些代码。它很少使用，但有时是有帮助的。例如，如果你想在每次’myVar’改变时运行一些代码，你可以这样做：

function MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar',function() {
        alert('hey,myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}

$ apply允许将更改与摘要周期集成

你可以认为$ apply函数是一个集成机制。你看，每次你改变一些观察变量直接附加到$ scope对象，AngularJS将知道发生了改变。这是因为AngularJS已经知道监视这些更改。因此，如果它发生在由框架管理的代码中，摘要周期将继续。

然而，有时你想改变AngularJS世界之外的一些值，并看到更改正常传播。
考虑这个 – 你有一个$ scope.myVar值，将在jQuery的$ .ajax()处理程序中修改。这将在未来的某个时间发生。 AngularJS不能等待这发生，因为它没有被指示等待jQuery。

为了解决这个问题，引入了$ apply。它允许您显式地启动消化循环。然而，你应该只使用它来迁移一些数据到AngularJS(与其他框架集成)，但不要使用这种方法结合常规的AngularJS代码，因为AngularJS会抛出一个错误。

所有这些都与DOM相关？

嗯，你应该真的再次按照教程，现在你知道这一切。摘要周期将确保UI和JavaScript代码保持同步，通过评估附加到所有$ scope的每个观察者，只要没有任何变化。如果摘要循环中没有更多的变化，那么它被认为是完成的。

您可以在Controller中显式地将对象附加到$ scope对象，也可以直接在视图中以{{expression}}形式声明它们。

我希望有助于澄清一些关于这一切的基本知识。

进一步阅读：

> Make Your Own AngularJS,Part 1: Scopes And Digest(awesome article！)