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是范围变量名。(例如，模型->视图)

双向数据绑定

ng-model主要放在表单元素中，并具有双向数据绑定

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

例如：<input name="firstname" ng-model="firstname"/>

当您与表单元素firstname交互时，ng-model将与$scope.firstname交互，并通过Digest周期自动更新相应的视图。(例如，模型视图和视图->模型)

一次性数据绑定

新语法在任何值(单向或双向)之前添加::，这将声明我们想要one time binding

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

一旦firstname被定义并包含一个值，AngularJS将对其执行unbind操作，并且任何模型更新都不会影响视图。

例如：使用ng-if时

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

使用ng类时

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

当使用重复ng-时

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

Answer 2

绑定的一种方式是将数据从模型绑定到视图。另外，双向绑定是将数据从模型绑定到视图，将视图绑定到模型。

Answer 3

UI中的数据绑定是将UI字段绑定到数据模型。数据绑定有两种方法:单向数据绑定和双向数据绑定

单向数据绑定->模型是唯一的真理来源。无论UI上发生了什么，都会触发一条消息到模型以更新部分数据。因此，数据是单向流动的，这变得很容易理解。

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

单向数据绑定是更好的方法，因为数据是单向流动的。此外，只有model有权更改应用程序状态。