数据绑定如何在AngularJS中运行？

Question

数据绑定如何在AngularJS框架中工作？

我没有在他们的网站上找到技术细节。 当数据从视图传播到模型时，它或多或少清楚它是如何工作的。 但是AngularJS如何在没有setter和getter的情况下跟踪模型属性的变化？

我发现有一些JavaScript观察者可以做这项工作。 但Internet Explorer 6和Internet Explorer 7不支持它们。 那么AngularJS如何知道我改变了例如以下内容并在视图上反映了这一变化？

myobject.myproperty="new value";

Answer 1

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

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

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

更改侦听器的问题：

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

性能怎么样？

所以看起来我们很慢，因为脏检查是低效的。 这是我们需要查看实数而不仅仅是理论参数的地方，但首先让我们定义一些约束。

人类是：

• 慢 - 任何比50毫秒快的东西都是人类察觉不到的，因此可以被视为“瞬间”。

• 有限 - 您无法在一个页面上向人类显示超过2000条信息。 除此之外的任何东西都是非常糟糕的UI，人类无论如何都无法处理它。

所以真正的问题是：你可以在50毫秒内对浏览器进行多少次比较？ 这是一个很难回答的问题，因为有很多因素可以发挥作用，但这里有一个测试案例： http ： //jsperf.com/angularjs-digest/6 ，创造了10,000个观察者。 在现代浏览器上，这需要不到6毫秒。 在Internet Explorer 8上大约需要40毫秒。 正如您所看到的，即使在速度较慢的浏览器上，这也不是问题。 有一点需要注意：比较需要很简单才能适应时间限制...不幸的是，在AngularJS中添加慢速比较太容易了，所以当你不知道你是什么时很容易构建慢速应用程序是做。 但是我们希望通过提供一个仪器模块得到答案，该模块可以向您展示哪些是缓慢的比较。

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

Answer 2

Misko已经对数据绑定的工作原理进行了很好的描述，但我想在数据绑定的性能问题上添加我的观点。

正如Misko所说，大约2000个绑定是你开始看到问题的地方，但你不应该在一个页面上有超过2000条信息。 这可能是真的，但并非每个数据绑定对用户都是可见的。 一旦你开始使用双向绑定构建任何类型的小部件或数据网格，你就可以轻松地命中2000个绑定，而不会有糟糕的用户体验。

例如，考虑一个组合框，您可以在其中键入文本以过滤可用选项。 这种控制可能有大约150个项目，仍然非常有用。 如果它有一些额外的功能（例如当前所选选项上的特定类），则每个选项开始获得3-5个绑定。 将这些小部件中的三个放在一个页面上（例如，一个用于选择国家/地区，另一个用于选择所述国家/地区的城市，第三个用于选择酒店）并且您已经介于1000到2000个绑定之间。

或者考虑企业Web应用程序中的数据网格。 每页50行并不合理，每行可以有10-20列。 如果使用ng-repeats构建它，和/或在某些使用某些绑定的单元格中包含信息，则可能仅使用此网格接近2000个绑定。

我发现使用AngularJS时这是一个很大的问题，到目前为止我能找到的唯一解决方案是构建小部件而不使用双向绑定，而不是使用ngOnce，取消注册观察者和类似的技巧，或构造使用jQuery和DOM操作构建DOM的指令。 我觉得这首先打败了使用Angular的目的。

我很想听听有关处理这个问题的其他方法的建议，但也许我应该写自己的问题。 我想把它放在评论中，但事实证明这太长了......

TL; DR
数据绑定可能会导致复杂页面出现性能问题。

Answer 3

通过脏检查$scope对象

Angular在$scope对象中维护一个简单的观察者array 。 如果你检查任何$scope你会发现它包含一个名为$$watchers的array 。

每个观察者都是一个包含其他内容的object

1. 观察者正在监视的表达。 这可能只是一个attribute名称，或者更复杂的东西。
2. 表达式的最后已知值。 可以根据表达式的当前计算值来检查。 如果值不同，观察者将触发该函数并将$scope标记为脏。
3. 观察者脏的时候执行的功能。

如何定义观察者

在AngularJS中定义观察者的方法有很多种。

• 您可以显式$watch $scope上的attribute 。

   $scope.$watch('person.username', validateUnique); 

• 您可以在模板中放置{{}}插值（将在当前$scope为您创建观察器）。

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

• 您可以询问诸如ng-model类的指令来为您定义观察器。

   <input ng-model="person.username" /> 

$digest循环检查所有观察者的最后一个值

当我们通过正常通道（ng-model，ng-repeat等）与AngularJS交互时，指令将触发摘要周期。

摘要周期是$scope及其所有子项的深度优先遍历 。 对于每个$scope object ，我们遍历其$$watchers array并评估所有表达式。 如果新表达式值与上一个已知值不同，则调用观察者的函数。 此函数可能会重新编译DOM的一部分，重新​​计算$scope的值，触发AJAX request ，以及您需要执行的任何操作。

遍历每个范围，并根据最后一个值评估和检查每个监视表达式。

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

如果触发了观察者，则应用程序知道某些内容已更改，并且$scope被标记为脏。

Watcher函数可以更改$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 array进行ng-repeat ，则很容易达到此限制。 您可以使用诸如一次性绑定之类的功能来缓解此问题，以便在不创建观察者的情况下编译模板。

如何避免创建太多的观察者

每当您的用户与您的应用互动时，您应用中的每位观察者都会至少评估一次。 优化AngularJS应用程序的一个重要部分是减少$scope树中的观察者数量。 一种简单的方法是使用一次时间绑定 。

如果您的数据很少会发生变化，您只能使用::语法将其绑定一次，如下所示：

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

要么

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

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

当您有许多项目的ng-repeat时，这一点尤为重要。

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

Answer 4

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

1. 通过将函数（返回要监视的东西）传递给$watch方法来$watch 。
2. 观察项目的更改必须在$apply方法包装的代码块中进行。
3. 在$apply结束时，调用$digest方法，该方法遍历每个监视并检查自上次$digest运行以来它们是否发生了变化。
4. 如果发现任何更改，则再次调用摘要，直到所有更改稳定为止。

在正常开发中，HTML中的数据绑定语法告诉AngularJS编译器为您创建监视，控制器方法已经在$apply中运行。 所以对应用程序开发人员来说，它是透明的。

Answer 5

我有一段时间自己想知道这件事。 没有setter， AngularJS如何注意$scope对象的变化？ 它会轮询它们吗？

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

当文档谈到不得不为AngularJS之外的代码手动调用$apply ，它正在谈论代码，这些代码在运行时并不源于调用堆栈中的AngularJS本身。

Answer 6

用图片解释：

数据绑定需要映射

范围中的引用不完全是模板中的引用。 当您对两个对象进行数据绑定时，您需要第三个侦听第一个对象并修改另一个对象。

在这里，当你修改<input> ，你会触摸data-ref3 。 经典的数据绑定机制将改变数据-ref4 。 那么其他{{data}}表达式将如何移动？

活动导致$ digest（）

Angular维护每个绑定的oldValue和newValue 。 在每个Angular事件之后 ，着名的$digest()循环将检查WatchList以查看是否有更改。 这些Angular事件是ng-click ， ng-change ， $http completed ...只要任何oldValue与newValue不同， $digest()就会循环。

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

结论

它有点像鸡蛋和鸡肉。 你永远不知道是谁开始，但希望它能按预期大部分时间工作。

另一点是，您可以轻松理解简单绑定对内存和CPU的影响。 希望桌面足够肥胖来处理这个问题。 手机并不那么强大。

Answer 7

显然，没有定期检查Scope是否附加的对象有任何变化。 并非所有附加到范围的对象都被观看。 范围原型维持一个观察者 。 当$digest被调用时， Scope仅遍历这个$$watchers 。

Angular为这些观众添加了观察者

1. {{表达式}} - 在您的模板中（以及其他有表达式的地方）或我们定义ng-model时。
   
2. $ scope。$ watch（'expression / function'） - 在你的JavaScript中，我们可以附加一个范围对象来观察角度。

$ watch函数有三个参数：

1. 第一个是观察者函数，它只返回对象，或者我们可以添加一个表达式。
   

2. 第二个是侦听器函数，当对象发生更改时将调用该函数。 DOM更改等所有内容都将在此函数中实现。
   

3. 第三个是一个可选参数，它接受一个布尔值。 如果它是真的，有角度的深度观察对象＆如果它的假角度只是做一个参考观察对象。 $ 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的粗略实现看起来像这样。

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

Answer 8

AngularJS在三个强大的函数的帮助下处理数据绑定机制： $ watch（） ， $ digest（）和$ apply（） 。 大多数情况下，AngularJS将调用$ scope。$ watch（）和$ scope。$ digest（），但在某些情况下，您可能需要手动调用这些函数以使用新值进行更新。

$ watch（） ： -

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

$ digest（） -

此函数遍历$ scope对象中的所有监视及其子$ scope对象
（如果有的话）。 当$ digest（）遍历监视时，它会检查表达式的值是否已更改。 如果值已更改，AngularJS将使用新值和旧值调用侦听器。 只要AngularJS认为有必要，就会调用$ digest（）函数。 例如，在单击按钮之后，或在AJAX调用之后。 在某些情况下，AngularJS不会为您调用$ digest（）函数。 在这种情况下，你必须自己调用它。

$ apply（） -

Angular会自动神奇地更新AngularJS上下文中的那些模型更改。 当您更改Angular上下文之外的任何模型（如浏览器DOM事件，setTimeout，XHR或第三方库）时，您需要通过手动调用$ apply（）来通知Angular更改。 当$ apply（）函数调用完成时，AngularJS会在内部调用$ digest（），因此所有数据绑定都会更新。

Answer 9

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

例如，如果模型有类似于：

$scope.model.people.name

表格的控制输入：

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

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

我通过模型的示例是从服务器数据更新的，当您要求邮政编码和基于书面加载的邮政编码时，与该视图关联的殖民地和城市列表，默认情况下为用户设置第一个值。 而且我工作得很好，发生了什么，是angularJS有时需要几秒钟来刷新模型，为此你可以在显示数据的同时放置一个微调器。

Answer 10

1. 单向数据绑定是一种方法，其中从数据模型中获取值并将其插入到HTML元素中。 无法从视图更新模型。 它用于经典模板系统。 这些系统仅在一个方向上绑定数据。

2. Angular应用程序中的数据绑定是模型和视图组件之间数据的自动同步。

通过数据绑定，您可以将模型视为应用程序中的单一事实来源。 视图始终是模型的投影。 如果模型已更改，则视图会反映更改，反之亦然。

Answer 11

以下是使用输入字段与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-model来监听和观察HTML元素上发生的事情，特别是在input字段上。 当事情发生时，做点什么。 在我们的例子中， ng-model使用小胡子符号{{}}绑定到我们的视图。 输入字段内输入的内容将立即显示在屏幕上。 这就是数据绑定的优点，使用最简单的AngularJS。

希望这可以帮助。

请参阅Codepen上的一个工作示例

Answer 12

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

对于Ex。

1）

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

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

O / P

Peter

您可以在ng-model绑定数据，如： -
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>

这里如果你想在控制器中使用输入name ，那么，

$scope.name = {};

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

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

Answer 13

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

Answer 14

数据绑定：

什么是数据绑定？

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

这怎么可能？

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

说明： Angular js在范围模型上设置观察者，如果模型发生更改，则会触发侦听器功能。

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

// Dom使用新值更新代码

}）;

那么何时以及如何调用观察者功能？

Watcher函数被称为摘要周期的一部分。

摘要循环被称为自动触发，作为在ng-model，ng-bind，$ timeout，ng-click和其他等指令/服务中构建的角度js的一部分，可以触发摘要循环。

消化循环功能：

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

即$rootScope.$apply()

注意：$ apply（）等于$ rootScope。$ digest（）这意味着脏检查从根或顶部开始，或父范围从角度js应用程序中的所有子$ scope开始。

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

谢谢。