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

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

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

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

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

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

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

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

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

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

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

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

数据绑定：

什么是数据绑定？

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

怎么可能？

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

说明：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框架脚本文件。

非常感谢。

下面是使用输入字段与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。

希望这有帮助。

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

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

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