ng-bind與一次性綁定的區別是什麼

Question

angular js中的「ng-bind」和「one time binding」有什麼區別？

如果有任何區別，我應該在哪裏使用它們中的每一個？

Answer 1

雙向數據綁定

兩AngularJS中的單向數據綁定意味着將數據從模型綁定到視圖，反之亦然（數據從範圍/控制器流向視圖，從視圖流向範圍/控制器）。 'ng-model'是一個用於實現雙向數據綁定的角度指令。無論視圖是否要求更新的數據，以及從視圖對該模型所做的任何修改都會立即反映回作用域/控制器，從Scope/Controller對該模型的任何修改都將自動傳播到視圖。

單向數據綁定

單向數據在AngularJS結合是指從模型數據綁定到視圖（從範圍/控制器數據流向圖）。 'ng-bind'是一個用於實現單向數據綁定的角度指令。在綁定之後，無論視圖是否要求更新的數據，範圍/控制器對該模型的任何修改都會自動傳播到視圖。從視圖到控制器的任何模型更改都不會發生傳播。

一次性數據綁定

正如其名稱所暗示的，綁定發生只有一次，即在第一摘要週期。一次綁定允許模型或視圖在控制器在第一個摘要循環中設置的值的基礎上更新一次。從AngularJS 1.3起，您可以使用「::」令牌來創建一次性數據綁定。一旦這個值穩定下來（這基本上意味着該值已被定義），這些綁定會註銷他們自己的$ watch（）函數。

一次性綁定用於在頁面穩定後不會更改的值。 「穩定」通常意味着該表達式已被賦值。一旦設置了該值，對控制器中的值的更改將不會更改顯示的值，直到頁面重新加載。 語法是{{:: expression}}。

因此，對於頁面穩定後不會更改的值或列表，請務必使用一次性綁定。這將減少我們應用程序中不必要的觀察者的數量。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="customer in ::customers" > 
 
    {{::customer.name}} 
 
    ({{customer.address}}) 
 
     <button ng-click="change(customer)">Change</button> 
 
    </div> 
 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.customers = [{ 
 
     name: 'Gloria Jane', 
 
     address: 'Silo Park, 9300 East Orchard Road, Greenwood Village, CO, 80114'},{ 
 
     name: 'Nicholas Michael', 
 
     address: 'Village Park, East Lake Avenue, Aurora, CO, 80016' 
 
    }]; 
 
    
 
    $scope.change = function(customer) { 
 
     customer.address = 'Cherry Creek State Park, 4201 S Parker Rd, Aurora, CO 80014, USA'; 
 
     customer.name ='Tessy Thomas'; 
 
    }; 
 
}); 
 
</script>

Answer 2

雙向數據綁定

雙向數據綁定提供能夠毫不費力地採取在您的範圍屬性的值和上視圖顯示它同時還具有一個文本輸入更新它沒有能力任何瘋狂的邏輯

一次性數據綁定

首先，我要肯定地指出，這是不是單向的數據綁定。這種事情並不是Angular提供的慣例。一次綁定允許模型或視圖在控制器在第一個摘要循環中設置的值的基礎上更新一次。

Answer 3

「ng-bind」只是AngularJS常規{{expression}}語法的html屬性版本。因此，<div ng-bind="productName"></div>相當於<div>{{productName}}</div>。

一次性綁定用於在頁面穩定後不會更改的值。 「穩定」通常意味着該表達式已被賦值。一旦設置了該值，對控制器中的值的更改將不會更改顯示的值，直到頁面重新加載。

語法是{{::expression}}。按照上面的示例，語法是

<div>{{::productName}}</div> 

用於確定一個頁面是穩定的算法的完整說明，可以在這裏找到：

https://docs.angularjs.org/guide/expression

Answer 4

這些不是相互排斥的概念。您可以一次性綁定NG綁定，以及：

< DIV NG綁定= 「::產品名稱」 > </DIV >