单向数据绑定是一种从数据模型中获取值并插入到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；博士数据绑定可能会导致复杂页面的性能问题。

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

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

$scope.model.people.name

表单的控制输入：

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

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

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

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

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

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

用图片解释：

数据绑定需要映射

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

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

事件导致$digest（）

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

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

结论

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

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

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中绑定数据。