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

本文翻译自：How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply . 我不明白如何使用$scope.$watch和$scope.$apply 。 The official documentation isn't helpful. 官方文档没有帮助。

What I don't understand specifically: 我不明白的是：

Are they connected to the DOM? 他们连接到DOM吗？
How can I update DOM changes to the model? 如何更新对模型的DOM更改？
What is the connection point between them? 它们之间的连接点是什么？

I tried this tutorial , but it takes the understanding of $watch and $apply for granted. 我尝试了本教程，但需要理解$watch和$apply是理所当然的。

What do $apply and $watch do, and how do I use them appropriately? $apply和$watch什么作用，如何正确使用它们？

#1楼

参考：https://stackoom.com/question/11PTM/如何在AngularJS中使用-scope-watch和-scope-apply

#2楼

You need to be aware about how AngularJS works in order to understand it. 您需要了解AngularJS的工作原理才能理解它。

Digest cycle and $scope 消化周期和作用域

First and foremost, AngularJS defines a concept of a so-called digest cycle . 首先，AngularJS定义了所谓的摘要循环的概念。 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 $scope s. 这个周期可以看作是一个循环，在此期间AngularJS检查所有$scope 监视的所有变量是否有任何更改。 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. 因此，如果您在控制器中定义了$scope.myVar且该变量被标记为watched ，那么您将隐式告诉AngularJS在循环的每次迭代中监视myVar的更改。

A natural follow-up question would be: Is everything attached to $scope being watched? 一个自然的后续问题是：是否正在监视$scope附带的所有内容？ 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. 如果您要监视$scope每个对象的更改，则摘要循环很快就会花费很多时间进行评估，并且您会很快遇到性能问题。 That is why the AngularJS team gave us two ways of declaring some $scope variable as being watched (read below). 这就是AngularJS团队为我们提供了两种方法来声明某些$scope变量被监视的原因（请参阅下文）。

$watch helps to listen for $scope changes $ watch有助于监听$ scope的变化

There are two ways of declaring a $scope variable as being watched. 有两种方法可以声明要监视的$scope变量。

By using it in your template via the expression <span>{{myVar}}</span> 通过表达式<span>{{myVar}}</span>在模板中使用它
By adding it manually via the $watch service 通过$watch服务手动添加

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. 广告1）这是最常见的情况，我敢肯定您之前看过它，但您不知道这是在后台创建手表的。 Yes, it had! 是的，它有！ Using AngularJS directives (such as ng-repeat ) can also create implicit watches. 使用AngularJS指令（例如ng-repeat ）也可以创建隐式监视。

Ad 2) This is how you create your own watches . 广告2）这就是您制作手表的方式 。 $watch service helps you to run some code when some value attached to the $scope has changed. $watch服务可帮助您在$scope附带的某些值发生更改时运行一些代码。 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: 例如，如果您希望每次“ 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允许将更改与摘要周期集成在一起

You can think of the $apply function as of an integration mechanism . 您可以将$apply函数视为一种集成机制 。 You see, each time you change some watched variable attached to the $scope object directly, AngularJS will know that the change has happened. 您会看到，每次更改直接附加到$scope对象的某个监视变量时 ，AngularJS都会知道更改已发生。 This is because AngularJS already knew to monitor those changes. 这是因为AngularJS已经知道监视这些更改。 So if it happens in code managed by the framework, the digest cycle will carry on. 因此，如果发生在框架管理的代码中，则摘要循环将继续进行。

However, sometimes you want to change some value outside of the AngularJS world and see the changes propagate normally. 但是，有时您想在AngularJS世界之外更改一些值，并看到更改可以正常传播。 Consider this - you have a $scope.myVar value which will be modified within a jQuery's $.ajax() handler. 考虑这一点-您有一个$scope.myVar值，它将在jQuery的$.ajax()处理函数中进行修改。 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不能等待这种情况发生，因为尚未指示它等待jQuery。

To tackle this, $apply has been introduced. 为了解决这个问题，引入了$apply 。 It lets you 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. 但是，您仅应使用此方法将某些数据迁移到AngularJS（与其他框架集成），而决不要将此方法与常规AngularJS代码结合使用，因为AngularJS会抛出错误。

How is all of this related to the DOM? 所有这些与DOM有什么关系？

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 stay synchronised, by evaluating every watcher attached to all $scope s as long as nothing changes. 只要不进行任何更改，摘要周期就可以通过评估附加到所有$scope的每个观察程序来确保UI和JavaScript代码保持同步。 If no more changes happen in the digest loop, then it's considered to be finished. 如果摘要循环中没有更多更改发生，则视为已完成。

You can attach objects to the $scope object either explicitly in the Controller, or by declaring them in {{expression}} form directly in the view. 您可以在Controller中显式地将对象附加到$scope对象，也可以直接在视图中以{{expression}}形式声明它们。

I hope that helps to clarify some basic knowledge about all this. 我希望这有助于澄清有关这一切的一些基本知识。

Further readings: 进一步阅读：

Make Your Own AngularJS, Part 1: Scopes And Digest 制作自己的AngularJS，第1部分：范围和摘要

#3楼

In AngularJS, we update our models, and our views/templates update the DOM "automatically" (via built-in or custom directives). 在AngularJS中，我们更新模型，并且视图/模板“自动”（通过内置或自定义指令）更新DOM。

$apply and $watch, both being Scope methods, are not related to the DOM. $ apply和$ watch都是Scope方法，与DOM不相关。

The Concepts page (section "Runtime") has a pretty good explanation of the $digest loop, $apply, the $evalAsync queue and the $watch list. “ 概念”页面（“运行时”部分）对$ digest循环，$ apply，$ evalAsync队列和$ watch列表有很好的解释。 Here's the picture that accompanies the text: 这是文字随附的图片：

$ digest循环

Whatever code has access to a scope – normally controllers and directives (their link functions and/or their controllers) – can set up a " watchExpression " that AngularJS will evaluate against that scope. 无论什么代码可以访问范围（通常是控制器和指令（它们的链接函数和/或其控制器）），都可以设置“ watchExpression ”，AngularJS将在该范围内对其进行评估。 This evaluation happens whenever AngularJS enters its $digest loop (in particular, the "$watch list" loop). 每当AngularJS进入其$ digest循环（尤其是“ $ watch list”循环）时，都会进行此评估。 You can watch individual scope properties, you can define a function to watch two properties together, you can watch the length of an array, etc. 您可以观察单个作用域属性，可以定义一个函数来一起观察两个属性，可以观察数组的长度，等等。

When things happen "inside AngularJS" – eg, you type into a textbox that has AngularJS two-way databinding enabled (ie, uses ng-model), an $http callback fires, etc. – $apply has already been called, so we're inside the "AngularJS" rectangle in the figure above. 当事情发生在“ AngularJS内部”时–例如，您键入一个启用了AngularJS双向数据绑定的文本框（即，使用ng-model），触发$ http回调等。–已经调用了$ apply，因此我们在上图中的“ AngularJS”矩形内。 All watchExpressions will be evaluated (possibly more than once – until no further changes are detected). 将对所有watchExpressions进行评估（可能不止一次-直到未检测到进一步的更改为止）。

When things happen "outside AngularJS" – eg, you used bind() in a directive and then that event fires, resulting in your callback being called, or some jQuery registered callback fires – we're still in the "Native" rectangle. 当事情发生在“ AngularJS外部”时（例如，您在指令中使用bind（），然后触发该事件，导致您的回调被调用，或者某些jQuery注册的回调被触发），我们仍然位于“本机”矩形中。 If the callback code modifies anything that any $watch is watching, call $apply to get into the AngularJS rectangle, causing the $digest loop to run, and hence AngularJS will notice the change and do its magic. 如果回调代码修改了任何$ watch正在监视的内容，请调用$ apply以进入AngularJS矩形，从而导致$ digest循环运行，因此AngularJS将注意到这一变化并发挥作用。

#4楼

There are $watchGroup and $watchCollection as well. 还有$watchGroup和$watchCollection 。 Specifically, $watchGroup is really helpful if you want to call a function to update an object which has multiple properties in a view that is not dom object, for eg other view in canvas, webGL or server request. 具体来说，如果要调用一个函数来更新在非dom对象的视图中具有多个属性的对象（例如，canvas，webGL或服务器请求中的其他视图）， $watchGroup确实很有帮助。 Here, the documentation link . 在这里，文档链接。

#5楼

This blog has been covered all that creating examples and understandable explanations. 这个博客已经涵盖了所有创建示例和可理解的解释。

The AngularJS $scope functions $watch(), $digest() and $apply() are some of the central functions in AngularJS. AngularJS $scope函数$watch(), $digest()和$apply()是AngularJS中的一些核心函数。 Understanding $watch() , $digest() and $apply() is essential in order to understand AngularJS. 理解$watch() ， $digest()和$apply()对于理解AngularJS至关重要。

When you create a data binding from somewhere in your view to a variable on the $scope object, AngularJS creates a "watch" internally. 当您从视图中的某个位置创建数据绑定到$ scope对象上的变量时，AngularJS会在内部创建一个“监视”。 A watch means that AngularJS watches changes in the variable on the $scope object . 手表意味着AngularJS监视$scope object上变量的变化。 The framework is "watching" the variable. 框架正在“观察”变量。 Watches are created using the $scope.$watch() function which I will cover later in this text. 手表是使用$scope.$watch()函数创建的，我将在本文后面介绍。

At key points in your application AngularJS calls the $scope.$digest() function. 在应用程序的关键点，AngularJS调用$scope.$digest()函数。 This function iterates through all watches and checks if any of the watched variables have changed. 此函数遍历所有监视并检查是否有任何监视变量已更改。 If a watched variable has changed, a corresponding listener function is called. 如果监视变量已更改，则调用相应的侦听器函数。 The listener function does whatever work it needs to do, for instance changing an HTML text to reflect the new value of the watched variable. 监听器函数执行它需要做的任何工作，例如更改HTML文本以反映监视变量的新值。 Thus, the $digest() function is what triggers the data binding to update. 因此， $digest()函数触发数据绑定更新。

Most of the time AngularJS will call the $scope.$watch() and $scope.$digest() functions for you, but in some situations you may have to call them yourself. 大多数时候AngularJS会为你调用$ scope。$ watch（）和$scope.$digest()函数，但在某些情况下你可能需要自己调用它们。 Therefore it is really good to know how they work. 因此，了解它们的工作方式真的很棒。

The $scope.$apply() function is used to execute some code, and then call $scope.$digest() after that, so all watches are checked and the corresponding watch listener functions are called. $scope.$apply()函数用于执行一些代码，然后调用$scope.$digest() ，因此检查所有监视并调用相应的监听器函数。 The $apply() function is useful when integrating AngularJS with other code. 将AngularJS与其他代码集成时， $apply()函数非常有用。

I will get into more detail about the $watch(), $digest() and $apply() functions in the remainder of this text. 我将在本文的其余部分详细介绍$watch(), $digest()和$apply()函数。

$watch() $表（）

The $scope.watch() function creates a watch of some variable. $scope.watch()函数创建一个变量的监视。 When you register a watch you pass two functions as parameters to the $watch() function: 注册表时，您将两个函数作为参数传递给$watch()函数：

A value function 价值功能
A listener function 听众功能

Here is an example: 这是一个例子：

$scope.$watch(function() {},
              function() {}
             );

The first function is the value function and the second function is the listener function. 第一个函数是值函数，第二个函数是监听器函数。

The value function should return the value which is being watched. 值函数应返回正在监视的值。 AngularJS can then check the value returned against the value the watch function returned the last time. 然后，AngularJS可以根据watch函数上次返回的值检查返回的值。 That way AngularJS can determine if the value has changed. 这样AngularJS可以确定值是否已更改。 Here is an example: 这是一个例子：

$scope.$watch(function(scope) { return scope.data.myVar },
              function() {}
             );

This example valule function returns the $scope variable scope.data.myVar . 此示例valule函数返回$scope变量scope.data.myVar 。 If the value of this variable changes, a different value will be returned, and AngularJS will call the listener function. 如果此变量的值发生更改，将返回不同的值，AngularJS将调用侦听器函数。

Notice how the value function takes the scope as parameter (without the $ in the name). 注意value函数如何将范围作为参数（名称中没有$）。 Via this parameter the value function can access the $scope and its variables. 通过此参数，value函数可以访问$scope及其变量。 The value function can also watch global variables instead if you need that, but most often you will watch a $scope variable. 如果需要，值函数也可以观察全局变量，但通常你会看到$scope变量。

The listener function should do whatever it needs to do if the value has changed. 如果值已更改，则侦听器函数应执行其需要执行的操作。 Perhaps you need to change the content of another variable, or set the content of an HTML element or something. 也许您需要更改另一个变量的内容，或者设置HTML元素的内容或其他内容。 Here is an example: 这是一个例子：

$scope.$watch(function(scope) { return scope.data.myVar },
              function(newValue, oldValue) {
                  document.getElementById("").innerHTML =
                      "" + newValue + "";
              }
             );

This example sets the inner HTML of an HTML element to the new value of the variable, embedded in the b element which makes the value bold. 此示例将HTML元素的内部HTML设置为变量的新值，嵌入在b元素中，使值变为粗体。 Of course you could have done this using the code {{ data.myVar } , but this is just an example of what you can do inside the listener function. 当然，您可以使用代码{{ data.myVar }完成此操作，但这只是您在侦听器函数中可以执行的操作的示例。

$digest() $摘要（）

The $scope.$digest() function iterates through all the watches in the $scope object , and its child $scope objects (if it has any). $scope.$digest()函数遍历$scope object中的所有监视及其子$ scope对象（如果有的话）。 When $digest() iterates over the watches, it calls the value function for each watch. 当$digest()遍历手表时，它会调用每个手表的值函数。 If the value returned by the value function is different than the value it returned the last time it was called, the listener function for that watch is called. 如果value函数返回的值与上次调用时返回的值不同，则调用该监视的监听器函数。

The $digest() function is called whenever AngularJS thinks it is necessary. 只要AngularJS认为有必要，就会调用$digest()函数。 For instance, after a button click handler has been executed, or after an AJAX call returns (after the done() / fail() callback function has been executed). 例如，在执行了按钮单击处理程序之后，或者在AJAX调用返回之后（在执行了done（）/ fail（）回调函数之后）。

You may encounter some corner cases where AngularJS does not call the $digest() function for you. 你可能会遇到AngularJS没有为你调用$digest()函数的一些极端情况。 You will usually detect that by noticing that the data bindings do not update the displayed values. 您通常会通过注意数据绑定不更新显示的值来检测到这一点。 In that case, call $scope.$digest() and it should work. 在这种情况下，调用$scope.$digest() ，它应该工作。 Or, you can perhaps use $scope.$apply() instead which I will explain in the next section. 或者，您可以使用$scope.$apply()代替我将在下一节中解释。

$apply() $适用（）

The $scope.$apply() function takes a function as parameter which is executed, and after that $scope.$digest() is called internally. $scope.$apply()函数将一个函数作为执行的参数，在$scope.$digest()在内部调用。 That makes it easier for you to make sure that all watches are checked, and thus all data bindings refreshed. 这使您更容易确保检查所有手表，从而刷新所有数据绑定。 Here is an $apply() example: 这是一个$apply()示例：

$scope.$apply(function() {
    $scope.data.myVar = "Another value";
});

The function passed to the $apply() function as parameter will change the value of $scope.data.myVar . 传递给$apply()函数作为参数的函数将更改$scope.data.myVar的值。 When the function exits AngularJS will call the $scope.$digest() function so all watches are checked for changes in the watched values. 当函数退出AngularJS时，将调用$scope.$digest()函数，以便检查所有监视的监视值的变化。

Example 例

To illustrate how $watch() , $digest( ) and $apply() works, look at this example: 为了说明$watch() ， $digest( ）和$apply()工作，请看这个例子：

<div ng-controller="myController">
    {{data.time}}

    <br/>
    <button ng-click="updateTime()">update time - ng-click</button>
    <button id="updateTimeButton"  >update time</button>
</div>


<script>
    var module       = angular.module("myapp", []);
    var myController1 = module.controller("myController", function($scope) {

        $scope.data = { time : new Date() };

        $scope.updateTime = function() {
            $scope.data.time = new Date();
        }

        document.getElementById("updateTimeButton")
                .addEventListener('click', function() {
            console.log("update time clicked");
            $scope.data.time = new Date();
        });
    });
</script>

his example binds the $scope.data.time variable to an interpolation directive which merges the variable value into the HTML page. 他的示例将$scope.data.time变量绑定到插值指令，该指令将变量值合并到HTML页面中。 This binding creates a watch internally on the $scope.data.time variable . 此绑定在$scope.data.time variable内部创建一个监视。

The example also contains two buttons. 该示例还包含两个按钮。 The first button has an ng-click listener attached to it. 第一个按钮附有一个ng-click侦听器。 When that button is clicked the $scope.updateTime() function is called, and after that AngularJS calls $scope.$digest() so that data bindings are updated. 单击该按钮时，将调用$scope.updateTime()函数，然后在AngularJS调用$scope.$digest()更新数据绑定。

The second button gets a standard JavaScript event listener attached to it from inside the controller function. 第二个按钮从控制器函数内部获取一个标准的JavaScript事件监听器。 When the second button is clicked that listener function is executed. 单击第二个按钮时，将执行侦听器功能。 As you can see, the listener functions for both buttons do almost the same, but when the second button's listener function is called, the data binding is not updated. 如您所见，两个按钮的侦听器函数几乎相同，但是当调用第二个按钮的侦听器函数时，不会更新数据绑定。 That is because the $scope.$digest() is not called after the second button's event listener is executed. 这是因为在执行第二个按钮的事件侦听器后，不会调用$scope.$digest() 。 Thus, if you click the second button the time is updated in the $scope.data.time variable, but the new time is never displayed. 因此，如果单击第二个按钮，则会在$scope.data.time变量中更新时间，但永远不会显示新时间。

To fix that we can add a $scope.$digest() call to the last line of the button event listener, like this: 为了解决这个问题，我们可以在按钮事件监听器的最后一行添加$scope.$digest()调用，如下所示：

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
    $scope.$digest();
});

Instead of calling $digest() inside the button listener function you could also have used the $apply() function like this: 而不是在按钮监听器函数中调用$digest() ，你也可以使用$apply()函数，如下所示：

document.getElementById("updateTimeButton")
        .addEventListener('click', function() {
    $scope.$apply(function() {
        console.log("update time clicked");
        $scope.data.time = new Date();
    });
});

Notice how the $scope.$apply() function is called from inside the button event listener, and how the update of the $scope.data.time variable is performed inside the function passed as parameter to the $apply() function. 注意如何从按钮事件监听器内部调用$scope.$apply()函数，以及如何在作为参数传递给$apply()函数的函数内执行$scope.data.time变量的更新。 When the $apply() function call finishes AngularJS calls $digest() internally, so all data bindings are updated. 当$apply()函数调用完成时，AngularJS会在内部调用$digest() ，因此所有数据绑定都会更新。

#6楼

AngularJS extends this events-loop , creating something called AngularJS context . AngularJS扩展了这个事件循环 ，创建了一个称为AngularJS context东西。

$watch() $ watch（）

Every time you bind something in the UI you insert a $watch in a $watch list . 每当您绑定的东西在UI您插入$watch在$watch名单 。

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

Here we have $scope.user , which is bound to the first input, and we have $scope.pass , which is bound to the second one. 在这里，我们有$scope.user绑定到第一个输入，而我们有$scope.pass绑定到第二个输入。 Doing this we add two $watch es to the $watch list . 这样做，我们将两个$watch es添加到$watch列表中 。

When our template is loaded, AKA in the linking phase, the compiler will look for every directive and creates all the $watch es that are needed. 加载我们的模板（即链接阶段）时，编译器将查找每个指令并创建所需的所有$watch 。

AngularJS provides $watch , $watchcollection and $watch(true) . AngularJS提供$watch ， $watchcollection和$watch(true) 。 Below is a neat diagram explaining all the three taken from watchers in depth . 下面是一张简洁的图表，深入地解释了从观察者身上提取的所有三种情况。

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/ http://jsfiddle.net/2Lyn0Lkb/

`$digest` loop `$digest`循环

When the browser receives an event that can be managed by the AngularJS context the $digest loop will be fired. 当浏览器收到可由AngularJS上下文管理的事件时，将触发$digest循环。 This loop is made from two smaller loops. 此循环由两个较小的循环组成。 One processes the $evalAsync queue, and the other one processes the $watch list . 一个处理$evalAsync队列，另一个处理$watch list 。 The $digest will loop through the list of $watch that we have $digest将遍历我们拥有的$watch列表

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

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

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

Here we have only one $watch because ng-click doesn't create any watches. 在这里，我们只有一个$watch因为ng-click不会创建任何手表。

We press the button. 我们按下按钮。

The browser receives an event which will enter the AngularJS context 浏览器收到一个事件，该事件将进入AngularJS上下文
The $digest loop will run and will ask every $watch for changes. $digest循环将运行，并将要求每个$ watch进行更改。
Since the $watch which was watching for changes in $scope.name reports a change, it will force another $digest loop. 由于$watch $ scope.name中的$ watch报告了更改，它将强制另一个$digest循环。
The new loop reports nothing. 新循环不报告任何内容。
The browser gets the control back and it will update the DOM reflecting the new value of $scope.name 浏览器将控件取回，它将更新反映$ scope.name新值的DOM。
The important thing here is that EVERY event that enters the AngularJS context will run a $digest loop. 这里重要的是，进入AngularJS上下文的每个事件都将运行$digest循环。 That means that every time we write a letter in an input, the loop will run checking every $watch in this page. 这意味着，每当我们在输入中写一个字母时，循环便会检查该页面中的每个$watch 。

$apply() $ apply（）

If you call $apply when an event is fired, it will go through the angular-context, but if you don't call it, it will run outside it. 如果在事件触发时调用$apply ，它将经过角度上下文，但是如果不调用它，它将在其外部运行。 It is as easy as that. 就是这么简单。 $apply will call the $digest() loop internally and it will iterate over all the watches to ensure the DOM is updated with the newly updated value. $apply将在内部调用$digest()循环，并将遍历所有手表以确保DOM已使用新更新的值进行了更新。

The $apply() method will trigger watchers on the entire $scope chain whereas the $digest() method will only trigger watchers on the current $scope and its children . $apply()方法将触发整个$scope链上的观察者，而$digest()方法将仅触发当前$scope及其children上的观察者。 When none of the higher-up $scope objects need to know about the local changes, you can use $digest() . 当更高级别的$scope对象都不需要了解本地更改时，可以使用$digest() 。

w36680130

发布了0 篇原创文章 · 获赞 73 · 访问量 55万+

私信关注