数据绑定在AngularJS框架中是如何工作的？
我没有在他们的网站上找到技术细节。当数据从视图传播到模型时，它或多或少地清楚它是如何工作的。但是AngularJS如何在没有setter和getter的情况下跟踪模型属性的变化呢？
我发现有JavaScript 观察者可以完成这项工作。但它们在Internet Explorer 6和Internet Explorer 7中不受支持。那么 AngularJS 是如何知道我更改了以下内容并将此更改反映在视图上的呢？
myobject.myproperty="new value";
AngularJS 会记住该值并将其与之前的值进行比较。这是基本的脏检查。如果值发生变化，则触发 change 事件。
当您从非 AngularJS 世界过渡到 AngularJS 世界时，该$apply()方法调用$digest(). 摘要只是简单的旧脏检查。它适用于所有浏览器并且完全可以预测。
对比脏检查（AngularJS）和更改监听器（KnockoutJS和Backbone.js）：虽然脏检查看起来很简单，甚至效率低下（我稍后会解决这个问题），但事实证明它在语义上一直是正确的，而更改侦听器有很多奇怪的极端情况，需要依赖跟踪之类的东西来使其在语义上更正确。KnockoutJS 依赖跟踪是 AngularJS 所没有的一个聪明的功能。
所以看起来我们很慢，因为脏检查效率低下。这是我们需要查看实数的地方，而不仅仅是理论上的论据，但首先让我们定义一些约束。
人类是：
慢- 任何快于 50 毫秒的速度对于人类来说是无法察觉的，因此可以被视为“即时”。
有限——你不能在一个页面上向一个人显示超过 2000 条信息。除此之外的任何东西都是非常糟糕的用户界面，人类无论如何也无法处理它。
所以真正的问题是：你可以在 50 毫秒内在浏览器上进行多少次比较？这是一个很难回答的问题，因为有许多因素在起作用，但这里有一个测试用例：http: //jsperf.com/angularjs-digest/6，它创建了 10,000 个观察者。在现代浏览器上，这需要不到 6 毫秒。在Internet Explorer 8上大约需要 40 毫秒。如您所见，即使在如今速度较慢的浏览器上，这也不是问题。有一个警告：比较需要简单以适应时间限制......不幸的是，将慢速比较添加到 AngularJS 中太容易了，因此当您不知道自己在做什么时，很容易构建慢速应用程序是做。但是我们希望通过提供一个检测模块来得到答案，它会告诉你哪些是慢速比较。
事实证明，视频游戏和 GPU 使用脏检查方法，特别是因为它是一致的。只要他们超过显示器刷新率（通常为 50-60 Hz，或每 16.6-20 毫秒），任何超过此的性能都是浪费，所以你最好画更多的东西，而不是提高 FPS。
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
数据绑定可能会导致复杂页面的性能问题。
$scope对象Angular 在对象中维护了一个简单array的观察者。$scope如果您检查任何$scope内容，您会发现它包含一个array被调用的$$watchers.
每个观察者都是一个object包含其他内容的
attribute名称，或者更复杂的东西。$scope为脏。在 AngularJS 中有许多不同的方法来定义观察者。
您可以明确$watch地attributeon $scope。
$scope.$watch('person.username', validateUnique);
您可以{{}}在模板中放置一个插值（将在 current 上为您创建一个观察者$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 的一部分，重新计算 on 的值$scope，触发 an AJAX request，以及任何你需要它做的事情。
遍历每个作用域，并根据最后一个值评估和检查每个监视表达式。
$scope则为脏如果触发了观察者，则应用程序知道某些内容发生了变化，并将其$scope标记为脏。
Watcher 函数可以更改父级$scope或父级上的其他属性$scope。如果一个$watcher函数被触发了，我们不能保证我们的其他$scopes仍然是干净的，所以我们再次执行整个摘要循环。
这是因为 AngularJS 有双向绑定，所以数据可以传回$scope树。$scope我们可能会更改已经消化的更高值。也许我们改变了$rootScope.
$digest是脏的，我们再次执行整个$digest循环我们不断地循环$digest循环，直到摘要循环干净（所有$watch表达式的值与前一个循环中的值相同），或者我们达到摘要限制。默认情况下，此限制设置为 10。
如果我们达到摘要限制，AngularJS 将在控制台中引发错误：
10 $digest() iterations reached. Aborting!
如您所见，每当 AngularJS 应用程序发生变化时，AngularJS 都会检查$scope层次结构中的每个观察者以查看如何响应。对于开发人员来说，这是一个巨大的生产力提升，因为您现在几乎不需要编写任何接线代码，AngularJS 只会注意到值是否已更改，并使应用程序的其余部分与更改保持一致。
从机器的角度来看，虽然这非常低效，并且如果我们创建太多的观察者会减慢我们的应用程序。Misko 引用了大约 4000 名观察者的数据，您的应用程序在旧浏览器上会感觉很慢。
ng-repeat例如，如果您超过一个大的，这个限制很容易达到JSON array。您可以使用一次性绑定等功能来缓解这种情况，以在不创建观察者的情况下编译模板。
每次您的用户与您的应用交互时，您应用中的每个观察者都将至少被评估一次。优化 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>
这是我的基本理解。很可能是错的！
$watch方法来监视项目。$apply方法包装的代码块内对监视项进行更改。$apply该$digest方法，该方法遍历每个手表并检查它们是否自上次$digest运行以来发生了变化。在正常的开发中，HTML 中的数据绑定语法告诉 AngularJS 编译器为您创建手表，并且控制器方法$apply已经在其中运行。所以对于应用程序开发人员来说，这一切都是透明的。
我自己想了一会儿。如果没有设置器，如何AngularJS通知$scope对象的更改？它会轮询他们吗？
AngularJS它的实际作用是：您修改模型的任何“正常”位置都已经从$apply. 假设您的控制器有一个连接到ng-click某个元素的方法。因为AngularJS为您将该方法的调用连接在一起，所以它有机会$apply在适当的地方做一个。同样，对于出现在视图中的表达式，它们AngularJS由$apply.
当文档谈到必须$apply手动调用之外的AngularJS代码时，它是在谈论运行时不源于AngularJS调用堆栈中的自身的代码。
用图片解释：
范围内的引用并不完全是模板中的引用。当您对两个对象进行数据绑定时，您需要第三个对象来监听第一个对象并修改另一个对象。
在这里，当您修改 时<input>，您会触摸data-ref3。经典的数据绑定机制将改变data-ref4。那么其他{{data}}表情将如何移动？
Angular 维护每个绑定的oldValueand newValue。在每个Angular 事件之后，著名的$digest()循环将检查 WatchList 以查看是否发生了变化。这些Angular 事件是ng-click, ng-change,$http完成的......$digest()只要任何oldValue与newValue.
在上图中，会注意到 data-ref1 和 data-ref2 发生了变化。
这有点像鸡蛋和鸡肉。你永远不知道谁开始，但希望它在大多数情况下都能按预期工作。
另一点是您可以轻松理解简单绑定对内存和 CPU 的深度影响。希望台式机足够胖来处理这个问题。手机没那么强。
显然，没有定期检查Scope附加到它的对象是否有任何变化。并非所有附加到范围的对象都被监视。范围原型维护一个$$watchers。只有在被调用时Scope才会迭代。$$watchers$digest
Angular 为每一个的 $$watchers 添加了一个观察者
- {{expression}} — 在您的模板中（以及任何其他有表达式的地方）或当我们定义 ng-model 时。
- $scope.$watch('expression/function') — 在您的 JavaScript 中，我们可以附加一个范围对象以供 Angular 观看。
$watch函数接受三个参数：
第一个是一个观察函数，它只返回对象，或者我们可以只添加一个表达式。
第二个是监听器函数，当对象发生变化时将调用它。所有像 DOM 变化这样的事情都将在这个函数中实现。
第三个是可选参数，它采用 boolean 。如果它是 true ，则 angular deep 会监视对象，如果它是 false 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 借助三个强大的函数处理数据绑定机制： $watch()、$digest()和$apply()。大多数时候 AngularJS 会调用 $scope.$watch() 和 $scope.$digest()，但在某些情况下，您可能必须手动调用这些函数来更新新值。
$watch() :-
此函数用于观察 $scope 上变量的变化。它接受三个参数：表达式、监听器和相等对象，其中监听器和相等对象是可选参数。
$digest() -
此函数遍历 $scope 对象中的所有监视及其子 $scope 对象
（如果有的话）。当 $digest() 遍历手表时，它会检查表达式的值是否已更改。如果值改变了，AngularJS 用新值和旧值调用监听器。只要 AngularJS 认为有必要，就会调用 $digest() 函数。例如，在单击按钮之后，或在 AJAX 调用之后。在某些情况下，AngularJS 可能不会为您调用 $digest() 函数。在这种情况下，您必须自己调用它。
$apply() -
Angular 只会自动更新那些在 AngularJS 上下文中的模型更改。当您在 Angular 上下文之外的任何模型中进行更改（例如浏览器 DOM 事件、setTimeout、XHR 或第三方库）时，您需要通过手动调用 $apply() 来通知 Angular 更改。当 $apply() 函数调用完成 AngularJS 在内部调用 $digest() 时，所有数据绑定都会更新。
碰巧我需要将一个人的数据模型与一个表单联系起来，我所做的就是将数据与表单直接映射。
例如，如果模型具有以下内容：
$scope.model.people.name
表单的控制输入：
<input type="text" name="namePeople" model="model.people.name">
这样，如果您修改对象控制器的值，这将自动反映在视图中。
我传递模型从服务器数据更新的一个例子是，当您要求邮政编码和邮政编码基于书面加载与该视图关联的殖民地和城市列表时，默认情况下为用户设置第一个值。这我工作得很好，确实发生了什么，angularJS有时需要几秒钟来刷新模型，为此你可以在显示数据时放置一个微调器。
单向数据绑定是一种从数据模型中获取值并将其插入 HTML 元素的方法。无法从视图中更新模型。它用于经典模板系统。这些系统仅在一个方向上绑定数据。
Angular 应用程序中的数据绑定是模型和视图组件之间数据的自动同步。
数据绑定使您可以将模型视为应用程序中的单一事实来源。视图始终是模型的投影。如果模型发生更改，视图会反映更改，反之亦然。
这是使用输入字段与 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中，使用 mustache notation 绑定到我们的视图{{}}。在输入字段中输入的任何内容都会立即显示在屏幕上。这就是数据绑定的美妙之处，以最简单的形式使用 AngularJS。
希望这可以帮助。
在Codepen上查看一个工作示例
AngularJs 支持双向数据绑定。
意味着您可以访问数据View -> Controller & Controller -> View
对于前。
1)
// If $scope have some value in Controller.
$scope.name = "Peter";
// HTML
<div> {{ name }} </div>
输出/输出
Peter
ng-model您可以在Like中绑定数据：-
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中绑定数据很容易。
Angular.js 为我们在视图中创建的每个模型创建一个观察者。每当模型更改时，模型都会附加一个“ng-dirty”类，因此观察者将观察所有具有“ng-dirty”类的模型并在控制器中更新它们的值，反之亦然。
数据绑定：
什么是数据绑定？
每当用户更改视图中的数据时，范围模型中的更改都会发生更新，反之亦然。
这怎么可能？
简短回答： 借助消化循环。
描述： Angular js 在作用域模型上设置观察者，如果模型发生变化，它会触发监听函数。
$scope.$watch('modelVar' , function(newValue,oldValue){
//Dom用新值更新代码
});
那么何时以及如何调用 watcher 函数呢？
Watcher 函数作为摘要循环的一部分被调用。
摘要循环被称为自动触发，作为内置指令/服务（如 ng-model、ng-bind、$timeout、ng-click 等）的 Angular js 的一部分......让您触发摘要循环。
消化循环功能：
$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope
IE$rootScope.$apply()
注意：$apply() 等于 $rootScope.$digest() 这意味着脏检查从根或顶部或父范围开始，一直到角度 js 应用程序中的所有子 $scope。
上述功能也可以在上述版本的浏览器 IE 中使用，只需确保您的应用程序是 angular js 应用程序，这意味着您使用的是 script 标签中引用的 angularjs 框架脚本文件。
谢谢你。