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

Question

我不明白如何使用 $scope.$watch 和 $scope.$apply。官方文档没有帮助。

我具体不明白的是:

• 它们是否连接到 DOM？
• 如何更新模型的 DOM 更改？
• 它们之间的连接点是什么？

我试过this tutorial ，但这需要理解 $watch 和 $apply 。

$apply 和 $watch 做什么，以及如何正确使用它们？

Answer 1

您需要了解 AngularJS 的工作原理才能理解它。

摘要周期和$scope

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

一个自然的后续问题是:所有内容都附加到$scope吗？被监视？幸运的是，没有。如果您想观察 $scope 中每个对象的更改，那么很快摘要循环将需要很长时间才能评估，并且您很快就会遇到性能问题。这就是为什么 AngularJS 团队为我们提供了两种声明某些 $scope 的方法。变量被监视(请阅读下文)。

$watch 有助于监听 $scope 的变化

有两种方式声明 $scope变量被监视。

1. 通过表达式 <span>{{myVar}}</span> 在模板中使用它
2. 通过 $watch 手动添加服务

广告1)这是最常见的场景，我相信你以前见过它，但你不知道这在后台创建了一个 watch 。是的，确实如此!使用 AngularJS 指令(例如 ng-repeat )也可以创建隐式监视。

广告2)这就是您创建自己的 watch 的方式。 $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 有何关系？

好吧，既然您已经了解了这一切，您真的应该再次按照教程进行操作。摘要周期将通过评估附加到所有 $scope 的每个观察者来确保 UI 和 JavaScript 代码保持同步。只要没有任何改变。如果摘要循环中不再发生任何更改，则认为已完成。

您可以将对象附加到 $scope对象要么显式地在 Controller 中，要么通过在 {{expression}} 中声明它们直接在 View 中形成。

进一步阅读:

• Make Your Own AngularJS, Part 1: Scopes And Digest