使用范围。$手表和范围。$适用于AngularJS [英] Using scope.$watch and scope.$apply in AngularJS

问题描述

我不知道如何使用范围。$看和范围。$适用。官方文档是没有帮助的。

I don't understand how to use scope.$watch and scope.$apply. The official documentation isn't helpful.

我不明白具体：

• 难道他们连接到DOM？


• 如何更新DOM更改模型？


• 什么是它们之间的连接点？

我试过本教程，但它需要<$ C $的理解C> $观看和 $适用是理所当然的。

I tried this tutorial, but it takes the understanding of $watch and $apply for granted.

什么 $适用和 $观看做的，我该如何恰当地使用它们呢？

What do $apply and $watch do, and how do I use them appropriately?

推荐答案

您需要了解有关AngularJS是如何工作的，以了解它。

You need to be aware about how AngularJS works in order to understand it.

首先，AngularJS定义了一个所谓的消化周期的概念。这个周期可以被看作是一个循环，在此期间，AngularJS检查是否有到所有变量的任何改变观看所有的 $范围。所以，如果你有 $ scope.myVar 在你的控制器定义，这个变量为标记为正在观看，然后你告诉隐到AngularJS监控在 myVar的在每次循环的变化。

First and foremost, AngularJS defines a concept of a so-called digest cycle. This cycle can be considered as a loop, during which AngularJS checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are implicitly telling AngularJS to monitor the changes on myVar in each iteration of the loop.

一个自然的后续问题是：一切都连接到 $范围被监视？幸运的是，没有。如果你会看在你的 $范围的变化对每个对象，然后迅速消化一环将采取年龄来评价，你会很快遇到性能问题。这就是为什么AngularJS队给了我们一些声明 $范围变量作为被监视（阅读下面）。

A natural follow-up question would be: Is everything attached to $scope being watched? Fortunately, no. If you would watch for changes to every object in your $scope, then quickly a digest loop would take ages to evaluate and you would quickly run into performance issues. That is why the AngularJS team gave us two ways of declaring some $scope variable as being watched (read below).

有声明 $范围变量作为被监视的两种方式。

There are two ways of declaring a $scope variable as being watched.

1. 将通过前pression在模板中使用它＆LT;跨度＆GT; {{myVar的}}＆LT; / SPAN＆GT;


2. 将通过 $观看服务中手动添加它

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-重复），也可以创建隐含的手表。

Ad 1) This is the most common scenario and I'm sure you've seen it before, but you didn't know that this has created a watch in the background. Yes, it had! Using AngularJS directives (such as ng-repeat) can also create implicit watches.

广告2）
这是你如何创建自己的手表。 $观看服务，可以帮助您在连接到 $范围一些值已更改运行一些code。它很少使用，但有时是有帮助的。举例来说，如果你想运行一些$ C $每次'myVar的改变C，你可以做到以下几点：

Ad 2) This is how you create your own watches. $watch service helps you to run some code when some value attached to the $scope has changed. It is rarely used, but sometimes is helpful. For instance, if you want to run some code each time 'myVar' changes, you could do the following:

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
    };
}

$应用能够整合与消化周期的变化

您可以考虑在 $适用功能作为一个集成机制的。你看，每次换贴在 $范围发生的观察的变量 对象直接，AngularJS会知道，变化已经发生。这是因为AngularJS已经知道监视这些变化。因此，如果在由框架管理code发生，消化周期将继续。

$apply enables to integrate changes with the digest cycle

You can think of the $apply function as of an integration mechanism. You see, each time you change some watched variable attached to the $scope object directly, AngularJS will know that the change has happened. This is because AngularJS already knew to monitor those changes. So if it happens in code managed by the framework, the digest cycle will carry on.

不过，有时你想的更改一些值AngularJS世界的外面，看到的变化正常传播。
考虑这一点 - 你有哪些会jQuery的 $阿贾克斯（）处理程序中修改的 $ scope.myVar 值。 。这将发生在未来的某一时刻。 AngularJS等不及要做到这一点，因为它没有被指示等待jQuery的。

However, sometimes you want to change some value outside of the AngularJS world and see the changes propagate normally. Consider this - you have a $scope.myVar value which will be modified within a jQuery's $.ajax() handler. This will happen at some point in future. AngularJS can't wait for this to happen, since it hasn't been instructed to wait on jQuery.

要解决这个问题， $适用已经出台。它可以让你明确地开始消化周期。然而，你应该只使用一些数据迁移到AngularJS（与其他框架的集成），但从来没有使用此方法与常规AngularJS code相结合，为AngularJS将抛出一个错误，那么。

To tackle this, $apply has been introduced. It lets you to start the digestion cycle explicitly. However, you should only use this to migrate some data to AngularJS (integration with other frameworks), but never use this method combined with regular AngularJS code, as AngularJS will throw an error then.

那么，你真的应该再按照教程，现在你知道这一切。摘要周期将确保用户界面和JavaScript code保持同步，通过评估附着于所有的 $范围所有的观看取值只要没有什么变化。如果没有更多的变化在消化循环发生，那么它被认为完成。

Well, you should really follow the tutorial again, now that you know all this. The digest cycle will make sure that the UI and the JavaScript code stays synchronised, by evaluating every watcher attached to the all $scopes as long as nothing changes. If no more changes happen in the digest loop, then it's considered to be finished.

你可以明确地在控制器，或在宣布它们附着对象的 $范围对象{{EX pression} } 的形式直接在视图中。

You can attach objects to the $scope object either explicitly in the Controller, or by declaring them in {{expression}} form directly in the view.

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

I hope that helps to clarify some basic knowledge about all this.

进一步阅读：

• 的 让你自己AngularJS，第1部分：范围和精华 的（！真棒文章）

这篇关于使用范围。$手表和范围。$适用于AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！