深入淺析AngularJS中的一次性數據綁定 (bindonce)

一、理解雙向數據綁定和監聽器

為了實現雙向數據綁定，AngularJS使用了$watch API來觀察期作用域中的模型變化。具體的作用域取決于你的代碼如何編寫。如果你沒有創建一個自作用域，就是說沒有使用ngController指令在你的DOM和你的控制器代碼之間創建一個關聯，你可能處理的是跟作用域$rootScope，這個作用域由ngApp自動創建，并且是應用中所有作用域的父作用域，當然，如果你選擇手動啟動AngularJS，那情況就另當別論了。每當你創建了一個數據綁定時，AngularJS就會自動創建一個監聽器來監聽這個數據的變化。比如說下面這個簡單的例子:

<p>Hello {{name}}!</p>

在這個例子中，我們使用了插值指令，這個指令會注冊一個監聽器來監聽相應作用域中屬性name的變化，并在該屬性發生變化時將它實時反應到DOM中。

添加下面的代碼，你的name屬性將會自動的被賦值為Pascal：

angular.module('myApp', []) 
 .run(function ($rootScope) { 
  $rootScope.name = "Pascal"; 
}]); 

 通過上面的代碼，我們就成功的使用了插值指令創建了在試圖上創建了一個數據綁定。現在，如果name屬性發生變化，視圖將會自動發生更新。比如說我們添加下面的代碼，在按鈕點擊是修改name的值:

<button ng-click="name = 'Christoph'">Click me!</button> 

  此時，點擊按鈕，我們可以將name的值修改為Christoph，同時我們會觸發一個$digest循環來更新DOM中相應的部分。在上面的例子中，你看的知識單向數據綁定。然而，你完全可以使用ngModel指令來將視圖中發生的變化實時的反應到模型中。

上面的雙向綁定魔法的實現完全依賴于$digest循環，當$digest循環被觸發時，AngularJS將會去處理遍歷當前作用域和子作用域中的所有監聽器，然后通過檢查模型中發生的變化來更新DOM中的值，直到模型不再發生變化為止。一旦$digest循環執行完成，瀏覽器會重新渲染DOM來反應模型數據變化。

 現在，我們大概了解了AngularJS的數據綁定機制，你可能會問我們為何還需要一次性數據綁定。

由于AngularJS使用監聽器來實現數據綁定。當監聽器越來越多時，可能會出現一些性能上的問題。由于在注冊監聽器使，同時會注冊一個回調函數，以便在$digest循環執行時能夠相應的更新視圖。也就是說，監聽器越多，AngularJS需要處理的回調函數也就越多。

現在假設在視圖中有很多值需要被AngularJS處理。比如說像上面使用插值指令來進行數據綁定，雖然我們可能并不想讓這個值只綁定一次，比如說上面的Pascal，在應用代碼執行的整個過程中這個屬性都不會發生改變，但是AngularJS默認依然會在這個屬性上綁定一個監聽器和回調函數。因此，在$digest時，AngularJS依然會去特意的關注這個值，這實在是有些過頭了。

二、一次性數據綁定(One-time bindings)

這就是我們需要一次性數據綁定的原因。在AngularJS的文檔中，我們可以清楚的了解到這個新特性的作用:一次性數據綁定表達式可以在數據穩定之后，不需要在$digest循環中重計算…

一次性數據綁定的出現解決了前面提到的由監聽器太多帶來的性能問題。那么我們應該如何使用一次性數據綁定呢？

使用一次性數據綁定非常的簡單，我們只需要在表達式之前加上雙冒號::即可。比如，前面我們使用了插值指令將name屬性綁定到了視圖中:

<p>Hello {{name}}!</p> 

使用一次性數據綁定，我們這樣寫:

<p>Hello {{::name}}!</p> 

在AngularJS 1.3版本中，你可以在任何AngularJS的表達式中使用一次性數據綁定。即使在諸如ng-repeat這樣嚴重依賴于雙向綁定的指令中，你依然可以使用它。

以上所述是小編給大家介紹的AngularJS中的一次性數據綁定 (bindonce)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！