这是我的基本理解。这很可能是错误的！

通过传递函数（返回要watch）转换为$watch方法。必须在代码块内对关注的项目进行更改由$apply方法包装。在$apply结束时，调用$digest方法通过每一块手表和检查，看看它们是否发生了变化上次运行$digest时。如果发现任何更改，则再次调用摘要，直到所有更改稳定下来。

在正常开发中，HTML告诉AngularJS编译器为您创建手表，并且控制器方法已经在$apply中运行。所以对于应用程序开发人员来说，它是完全透明的。

AngularJS记住该值并将其与以前的值进行比较。这是基本的脏检查。如果值发生变化，则触发变化事件。

$apply（）方法调用$digital（），它是当您从非AngularJS世界转换到AngularJS时调用的方法。摘要只是一个简单的旧检查。它适用于所有浏览器，完全可以预测。

对比脏检查（AngularJS）和更改侦听器（KnockoutJS和Backbone.js）：虽然脏检查可能看起来很简单，甚至效率很低（我稍后会讨论），但事实证明它始终在语义上是正确的，而更改侦听器有很多奇怪的角落情况，需要依赖项跟踪之类的东西来使其更加语义正确。KnockoutJS依赖跟踪是解决AngularJS没有的问题的一个聪明功能。

更改侦听器的问题：

这种语法非常糟糕，因为浏览器本身不支持它。是的，有代理，但它们在所有情况下都不是语义正确的，当然在旧浏览器上也没有代理。底线是，脏检查允许您执行POJO，而KnockoutJS和Backbone.js强制您从它们的类继承，并通过访问器访问数据。更改合并。假设您有一个项目数组。假设您想将项添加到数组中，因为您正在循环添加，每次添加时都会触发更改事件，这就是呈现UI。这对性能非常不利。您需要的是在最后只更新一次UI。更改事件过于精细。更改侦听器会立即触发setter，这是一个问题，因为更改侦听器可以进一步更改数据，从而触发更多的更改事件。这很糟糕，因为在堆栈上，可能会同时发生多个更改事件。假设您有两个数组，无论出于何种原因，它们都需要保持同步。您只能添加其中一个或另一个，但每次添加时都会引发一个更改事件，这会导致对世界的看法不一致。这是一个非常类似于线程锁定的问题，JavaScript避免了这个问题，因为每个回调都以独占方式执行，直到完成。更改事件打破了这一点，因为设置器可能会产生深远的后果，而这些后果不是故意的，也不是显而易见的，这会再次导致线程问题。事实证明，您想要做的是延迟侦听器的执行，并保证一次只运行一个侦听器，因此任何代码都可以自由更改数据，并且它知道在执行此操作时没有其他代码运行。

性能如何？

因此，我们似乎很慢，因为脏检查效率很低。这就是我们需要研究实数的地方，而不仅仅是理论论证，但首先我们来定义一些约束条件。

人类是：

慢-任何速度超过50毫秒的东西都是人类无法察觉的，因此可以被视为“瞬间”。有限-你不能在一个页面上向人类显示超过2000条信息。除此之外的任何东西都是非常糟糕的UI，人类无论如何都无法处理它。

所以真正的问题是：在50毫秒内，你可以在浏览器上进行多少次比较？这是一个很难回答的问题，因为许多因素都在起作用，但这里有一个测试案例：http://jsperf.com/angularjs-digest/6这创造了10000名观众。在现代浏览器上，这需要不到6毫秒的时间。在Internet Explorer 8上，大约需要40毫秒。正如你所看到的，即使是在现在速度较慢的浏览器上，这也不是问题。有一个警告：比较需要简单，以符合时间限制。。。不幸的是，在AngularJS中添加缓慢的比较太容易了，所以当你不知道自己在做什么时，很容易构建缓慢的应用程序。但我们希望通过提供一个检测模块来得到答案，它将向您显示哪些是比较缓慢的。

事实证明，视频游戏和GPU使用脏检查方法，特别是因为它是一致的。只要它们超过了监视器刷新率（通常为50-60 Hz，或每16.6-20 ms），任何超过这个速度的性能都是浪费，所以你最好画更多的东西，而不是提高FPS。

我自己也有一段时间对此感到奇怪。没有setters，AngularJS如何注意到$scope对象的更改？它会投票吗？

它实际上是这样做的：您修改模型的任何“正常”位置都已经从AngularJS的内部调用，因此它会在代码运行后自动为您调用$apply。假设你的控制器有一个方法，它连接到某个元素上的ng点击。因为AngularJS为您将该方法的调用连接在一起，所以它有机会在适当的位置执行$apply。同样，对于出现在视图中的表达式，这些表达式由AngularJS执行，因此它执行$apply。

当文档谈到必须为AngularJS之外的代码手动调用$apply时，它指的是运行时不源自调用堆栈中AngularJS本身的代码。

Misko已经很好地描述了数据绑定的工作方式，但我想补充一下我对数据绑定性能问题的看法。

正如Misko所说，大约2000个绑定是您开始发现问题的地方，但无论如何，页面上的信息不应该超过2000条。这可能是正确的，但并不是每个数据绑定都对用户可见。一旦开始使用双向绑定构建任何类型的小部件或数据网格，就可以很容易地达到2000个绑定，而不会出现糟糕的UX。

例如，考虑一个组合框，您可以在其中键入文本以筛选可用选项。这种控件可能有150个项目，并且仍然非常有用。如果它有一些额外的特性（例如，当前所选选项上的特定类），则开始为每个选项提供3-5个绑定。在一个页面上放置三个小部件（例如，一个用于选择国家，另一个用于在所述国家中选择城市，第三个用于选择酒店），您已经绑定了1000到2000个绑定。

或者考虑企业web应用程序中的数据网格。每页50行不是不合理的，每行可以有10-20列。如果您使用ng重复进行构建，和/或在某些使用某些绑定的单元格中有信息，那么仅使用此网格就可能接近2000个绑定。

在使用AngularJS时，我发现这是一个巨大的问题，到目前为止，我能找到的唯一解决方案是在不使用双向绑定的情况下构造小部件，而不是使用ngOnce、注销观察者和类似的技巧，或者构造用jQuery和DOM操纵构建DOM的指令。我觉得这一点一开始就违背了使用Angular的目的。

我很想听听关于处理这个问题的其他方法的建议，但也许我应该自己写一个问题。我想在评论中发表这一点，但事实证明这太长了。。。

TL；博士数据绑定可能会导致复杂页面的性能问题。

碰巧我需要将一个人的数据模型与表单链接起来，我所做的是将数据与表单直接映射。

例如，如果模型具有以下内容：

$scope.model.people.name

表单的控制输入：

<input type="text" name="namePeople" model="model.people.name">

这样，如果修改对象控制器的值，这将自动反映在视图中。

我传递的一个从服务器数据更新模型的例子是，当您根据与该视图相关联的殖民地和城市列表的书面加载请求邮政编码和邮编时，默认情况下会向用户设置第一个值。这一点我做得很好，确实发生了，angularJS有时需要几秒钟来刷新模型，为此，您可以在显示数据时放置一个微调器。

通过脏检查$scope对象

Angular在$scope对象中维护一个简单的观察者数组。如果您检查任何$scope，就会发现它包含一个名为$$watcher的数组。

每个观察者都是一个对象，其中包含其他内容

观察程序正在监视的表达式。这可能只是一个属性名称，或者更复杂的东西。表达式的最后一个已知值。这可以根据表达式的当前计算值进行检查。如果值不同，观察者将触发函数并将$scope标记为dirty。如果观察程序是脏的，将执行的函数。

如何定义观察者

在AngularJS中有许多不同的定义观察者的方法。

您可以在$scope上显式地$watch属性。$范围$watch（'person.username'，validateUnique）；您可以在模板中放置｛｛｝｝插值（将在当前$scope上为您创建一个观察程序）。<p>用户名：｛｛person.username｝｝</p>您可以要求一个指令（如ng模型）为您定义观察者。<input ng model=“person.username”/>

$digest周期检查所有观察者的最后值

当我们通过正常通道（ng模型、ng重复等）与AngularJS交互时，指令将触发摘要循环。

摘要循环是对$scope及其所有子级的深度优先遍历。对于每个$scope对象，我们迭代其$$watcher数组并计算所有表达式。如果新的表达式值与上一个已知值不同，则调用观察者的函数。这个函数可能会重新编译DOM的一部分，重新计算$scope上的值，触发AJAX请求，任何您需要它做的事情。

遍历每个作用域，并根据最后一个值计算和检查每个监视表达式。

如果触发了观察者，则$scope是脏的

如果触发了观察者，则应用程序知道发生了变化，$scope被标记为dirty。

观察者函数可以更改$scope或父$scope上的其他属性。如果触发了一个$watcher函数，我们不能保证我们的其他$scope仍然是干净的，因此我们再次执行整个摘要循环。

这是因为AngularJS具有双向绑定，因此可以将数据传递回$scope树。我们可能会更改已经消化的较高$scope的值。也许我们更改了$rootScope上的值。

如果$digest是脏的，我们将再次执行整个$digest循环

我们不断循环$digest循环，直到消化循环干净（所有$watch表达式的值与上一个循环中的值相同），或者达到消化极限。默认情况下，此限制设置为10。

如果我们达到摘要限制，AngularJS将在控制台中引发错误：

10 $digest() iterations reached. Aborting!

摘要对机器来说很难，但对开发人员来说很容易

正如您所看到的，每当AngularJS应用程序发生变化时，AngularJS都会检查$scope层次结构中的每个观察者，以查看如何响应。对于开发人员来说，这是一个巨大的生产力优势，因为您现在几乎不需要编写任何布线代码，AngularJS只会注意到值是否发生了变化，并使应用程序的其余部分与变化保持一致。

从机器的角度来看，这是非常低效的，如果我们创建了太多的观察者，会减慢我们的应用程序的速度。Misko引用了大约4000名观察者的数据，在你的应用程序在较旧的浏览器上运行缓慢之前。

例如，如果在大型JSON数组上重复，则很容易达到此限制。您可以使用一次性绑定等功能来编译模板，而无需创建观察者。

如何避免创建过多观察者

每次用户与应用程序交互时，应用程序中的每个观察者都将至少进行一次评估。优化AngularJS应用程序的很大一部分是减少$scope树中的观察者数量。一种简单的方法是一次性绑定。

如果您有很少更改的数据，则只能使用：：语法将其绑定一次，如下所示：

<p>{{::person.username}}</p>

or

<p ng-bind="::person.username"></p>

只有当呈现包含模板并将数据加载到$scope中时，才会触发绑定。

当你重复很多项目时，这一点尤为重要。

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

下面是使用输入字段与AngularJS进行数据绑定的示例。我稍后会解释

HTML代码

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

AngularJS代码

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

正如您在上面的示例中看到的，AngularJS使用ng模型来监听和监视HTML元素，尤其是输入字段上发生的情况。当事情发生时，做点什么。在我们的例子中，ng模型使用八字胡符号{{}}绑定到我们的视图。输入字段中键入的任何内容都会立即显示在屏幕上。这就是数据绑定的美妙之处，以最简单的形式使用AngularJS。

希望这有帮助。

请参阅此处的工作示例代码笔

AngularJS借助三个强大的函数来处理数据绑定机制：$watch（）、$digital（）和$apply（）。大多数时候AngularJS都会调用$scope$watch（）和$scope$digest（），但是在某些情况下，您可能需要手动调用这些函数来更新新值。

$watch（）：-

此函数用于观察$scope上变量的变化。它接受三个参数：表达式、监听器和相等对象，其中监听器和相等对象是可选参数。

$digest（）-

此函数迭代$scope对象中的所有手表，及其子$scope对象（如果有）。当$digest（）迭代时在手表上，它检查表达式的值是否改变。如果值已更改，AngularJS将使用新值和旧值。调用$digest（）函数每当AngularJS认为有必要时。例如，在按钮之后或者在AJAX调用之后。在某些情况下，AngularJS不会为您调用$digest（）函数。在这种情况下，你必须你自己说吧。

$apply（）-

Angular确实会自动神奇地更新那些在AngularJS上下文中。当您在Angular上下文（如浏览器DOM事件、setTimeout、XHR或第三个party库），则需要通过手动调用$apply（）。当$apply（）函数调用完成时AngularJS在内部调用$digital（），因此所有数据绑定都是更新。

用图片解释：

数据绑定需要映射

作用域中的引用与模板中的引用不完全相同。当您数据绑定两个对象时，需要第三个对象侦听第一个对象并修改另一个对象。

在这里，当您修改＜input＞时，您会触摸data-ref3。经典的数据绑定机制将改变data-ref4。那么其他｛｛数据｝｝表达式将如何移动？

事件导致$digest（）

Angular维护每个绑定的oldValue和newValue。在每一个Angular事件之后，著名的$digest（）循环都会检查WatchList以查看是否发生了变化。这些Angular事件是ng单击、ng更改、$http完成。。。只要任何oldValue与newValue不同，$digest（）就会循环。

在上一张图片中，它将注意到data-ref1和data-ref2已更改。

结论

这有点像鸡蛋和鸡肉。你永远不知道是谁开始，但希望大多数时候都能像预期的那样。

另一点是，您可以很容易地理解简单绑定对内存和CPU的影响。希望台式机足够胖，可以处理这个问题。手机没有那么强。

显然，并没有定期检查作用域中附加的对象是否有任何变化。并不是所有附加到作用域的对象都被监视。范围原型通常维护一个$$观察者。当调用$digest时，作用域仅遍历此$$watcher。

Angular为每个$$观察者添加一个观察者

｛｛表达式｝｝ — 在您的模板中（以及其他任何有表达式的地方），或者在我们定义ng模型时。$范围$watch（'表达式/函数'） — 在您的JavaScript中，我们只需附加一个范围对象来观察angular。

$watch函数接受三个参数：

第一个是一个观察函数，它只返回对象，或者我们可以添加一个表达式。第二个是侦听器函数，当对象发生更改时将调用该函数。所有诸如DOM更改的事情都将在该函数中实现。第三个是可选参数，它接受布尔值。如果它为真，angular deep会监视对象；如果它为假，angular只会对对象进行引用监视。$watch的大致实现如下

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

在Angular中有一个有趣的东西叫做Digest Cycle。$digest循环是调用$scope的结果$digest（）。假设您通过ng-click指令更改处理程序函数中的$scope模型。在这种情况下，AngularJS通过调用$digest（）自动触发$digest循环。除了ng-click之外，还有几个内置的指令/服务可以让您更改模型（例如ng-model、$timeout等）并自动触发$digest循环。$digest的大致实现如下所示。

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

如果我们使用JavaScript的setTimeout（）函数来更新范围模型，Angular无法知道您可能会更改什么。在这种情况下，我们有责任手动调用$apply（），这将触发$digest循环。类似地，如果您有一个指令设置DOM事件侦听器并更改处理程序函数中的某些模型，则需要调用$apply（）以确保更改生效。$apply的主要思想是，我们可以执行一些不知道Angular的代码，这些代码可能仍然会改变作用域上的内容。如果我们将代码包装在$apply中，它将负责调用$digest（）。$apply（）的粗略实现。

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

AngularJs支持双向数据绑定。意味着您可以访问数据视图->控制器和控制器->视图

例如。

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O/P

Peter

您可以在ng模型中绑定数据，如：-2)

<input ng-model="name" />

<div> {{ name }} </div>

在上面的示例中，无论用户将给出什么输入，它都将在＜div＞标记中可见。

如果要将输入从html绑定到控制器：-3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

如果您想在控制器中使用输入名称，

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng模型绑定我们的视图并在表达式{{}}中呈现它。ng模型是在视图中显示给用户并与用户交互的数据。因此，很容易在AngularJs中绑定数据。

Angular.js为我们在视图中创建的每个模型创建一个观察者。每当一个模型被更改时，一个“ng dirty”类就会被附加到该模型上，因此观察者将观察所有具有“ng dirt”类的模型，并在控制器中更新它们的值，反之亦然。

单向数据绑定是一种从数据模型中获取值并插入到HTML元素中的方法。无法从视图更新模型。它用于经典模板系统。这些系统仅在一个方向上绑定数据。Angular应用程序中的数据绑定是模型和视图组件之间数据的自动同步。

数据绑定允许您将模型视为应用程序中的唯一真实来源。视图始终是模型的投影。如果模型已更改，视图将反映更改，反之亦然。

数据绑定：

什么是数据绑定？

每当用户更改视图中的数据时，范围模型中就会出现该更改的更新，反之亦然。

怎么可能？

简短回答：借助消化循环。

说明：Angular js在作用域模型上设置观察者，如果模型发生变化，它会触发监听器函数。

$scope.$watch('modelVar' , function(newValue,oldValue){

//使用新值更新Dom代码

});

那么何时以及如何调用观察程序函数？

作为摘要循环的一部分调用观察程序函数。

摘要循环是作为angular js内置指令/服务的一部分自动触发的，如ng model、ng bind、$timeout、ng click等。。让你触发消化周期。

摘要循环功能：

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

即$rootScope.$apply（）

注：$apply（）等于$rootScope$digest（）这意味着脏检查从根或顶部或父作用域开始，一直到angular js应用程序中的所有子$scopes。

上述功能适用于上述版本的浏览器IE，只需确保您的应用程序是angular js应用程序，这意味着您使用的是脚本标记中引用的angularjs框架脚本文件。

非常感谢。