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循環自動更新相應的視圖。（例如，Model - > View and View - > Model）

一次性數據綁定

新語法在任何值（ 單向或雙向 ）前添加:: ，聲明我們需要one time binding ：

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

一旦firstname被定義並包含一個值，AngularJS將unbind它，任何Model更新都不會影響View。

例如。 使用ng-if時

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

使用ng-class時

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

使用重復時

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

Answer 2

單向綁定是將數據從模型綁定到視圖。 另外，雙向綁定是將數據從模型綁定到視圖並查看到模型。

Answer 3

UI中的數據綁定是UI字段與數據模型的綁定。 數據綁定有兩種方法：一種是數據綁定方式，另一種是雙向數據綁定方式

單向數據綁定 - >模型是單一的事實來源。 無論在UI上發生什么，都會觸發建模消息以更新部分數據。 因此，數據在單一方向上流動，並且變得易於理解。

雙向數據綁定 - > UI字段中的任何更改都會更新模型，模型中的任何更改都會更新UI字段。

由於數據的單向流動，單向數據綁定是更好的方法。 此外，只有model可以訪問更改應用程序狀態。