angularjs中单向绑定和双向绑定之间的区别

Question

您能解释One-way Data Binding和Two-way Data Binding之间的区别，并举例说明我们使用了哪种情况？

Answer 1

单向数据绑定

ng-bind具有单向数据绑定(Model($scope) --> View) 例如。     ng-bind="myText"或{{ myText }}

显示插入HTML的范围值$scope.myText，其中myText是范围变量名称。（例如，模型 - ＆gt;视图）

双向数据绑定

ng-model主要用于表单元素，并具有双向数据绑定

(Model($scope) --> View and View --> Model($scope))

EG。 <input name="firstname" ng-model="firstname"/>

当您与firstname与ng-model互动的表单元素$scope.firstname进行互动，并通过Digest周期自动更新相应的视图。（例如，模型 - ＆gt;查看和视图 - ＆gt;模型）

一次性数据绑定

新语法在任何值（单向或双向）前添加::，声明我们需要one time binding：

<p>
  {{ ::firstname }}
</p>

一旦firstname被定义并包含一个值，AngularJS将unbind它，任何模型更新都不会影响视图。

EG。使用 ng-if

时

<div ng-if="::user.firstname"></div>

使用 ng-class

时

<div ng-class="::{ 'active': user.firstname }"></div>

当使用 ng-repeat

时

<ul>
  <li ng-repeat="user in ::users"></li>
</ul>

Answer 2

单向绑定是将数据从模型绑定到视图。另外，双向绑定是将数据从模型绑定到视图并查看到模型。

Answer 3

UI中的

数据绑定是UI字段与数据模型的绑定。数据绑定有两种方法：一种是数据绑定，另一种是数据绑定

单向数据绑定->模型是真理的唯一来源。用户界面上发生的任何事情都会触发一条消息，以进行建模以更新部分数据。因此数据沿单一方向流动，这变得易于理解。

双向数据绑定-> UI字段中的任何更改都会更新模型，而模型中的任何更改都会更新UI字段。

由于数据的单向流动，单向数据绑定是更好的方法。另外，只有模型有权更改应用程序状态。