问题

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

我不明白的是:

  • Are they connected to the DOM?
  • How can I update DOM changes to the model?
  • What is the connection point between them?

我尝试本教程,但需要了解的 $ watch $ apply .

$ apply $ watch 做什么,以及如何正确使用它们?



解决方法

您需要了解AngularJS的工作原理以了解它.

Digest cycle and $scope

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

一个自然的后续问题是:是否所有附加到 $ scope 被观看?幸运的是,没有.如果你将注意对 $ scope 中的每个对象的更改,那么很快,一个摘要循环需要花费很长时间才能评估,并且很快就会遇到性能问题.这就是为什么AngularJS团队给我们两种方式来声明一些 $ scope 变量被监视(见下面).

$watch helps to listen for $scope changes

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

  1. By using it in your template via the expression <span>{{myVar}}</span>
  2. By adding it manually via the $watch service

广告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 enables to integrate changes with the digest cycle

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

但是,有时您想要更改AngularJS世界之外的某些值,并看到更改正常传播. 考虑这个 - 你有一个 $ scope.myVar 值,它将在jQuery的 $.ajax()处理程序中修改.这将在未来的某个时间发生. AngularJS不能等待这种情况发生,因为它没有被指示等待jQuery.

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

How is all of this related to the DOM?

好吧,你应该再次按照教程,现在你知道这一切.摘要循环将确保UI和JavaScript代码保持同步,通过评估附加到所有 $ scope 的每个观察者,只要没有任何变化.如果摘要循环中没有发生任何更改,则认为已完成.

您可以在Controller中显式地将对象附加到 $ scope 对象,也可以直接在视图中在 {{expression}} p>

我希望能协助澄清这些基本知识.

进一步阅读:




相关问题推荐