angularJS使用watch監控資料模型的變化

angularJS使用watch監控資料模型的變化

使用$watch監控資料模型的變化

在scope 內建的所有函數中，用得最多的可能就是$watch 函數了，當你的資料模型中某一部分發生變化時，$watch 函數可以向你發出通知。你可以監控單個對象的屬性，也可以監控需要經過計算的結果（函數），實際上只要能夠被當作屬性訪問到，或者可以當作一個JavaScript 函數被計算出來，就可以被$watch 函數監控。它的函數簽名為

 

1. $watch(watchFn, watchAction, deepWatch)

其中每個參數的詳細含義如下。

watchFn

該參數是一個帶有Angular 運算式或者函數的字串，它會返回被監控的資料模型的當前值。這個運算式將會被執行很多次，所以你要保證它不會產生其他副作用。也就是說，要保證它可以被調用很多次而不會改變狀態。基於同樣的原因，監控運算式應該很容易被計算出來。如果你使用字串傳遞了一個Angular 運算式，那麼它將會針對調用它的那個範圍中的對象而執行。

watchAction

這是一個函數或者運算式，當watchFn 發生變化時會被調用。如果是函數的形式，它將會接收到watchFn 的新舊兩個值，以及範圍對象的引用。其函數簽名為function(newValue, oldValue, scope)。

deepWatch

如果設定為true，這個可選的布爾型參數將會命令Angular 去檢查被監控對象的每個屬性是否發生了變化。如果你想要監控數組中的元素，或者對象上的所有屬性，而不只是監控一個簡單的值，你就可以使用這個參數。由於Angular 需要遍曆數組或者對象，如果集合比較大，那麼運算負擔就會比較重。

$watch 函數會返回一個函數，當你不再需要接收變更通知時，可以用這個返回的函數登出監控器。

如果我們需要監控一個屬性，然後接著登出監控，我們可以使用以下代碼：

 

1. ...
2. var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
3. …
4. dereg();

我們再回到第1 章的購物車案例，把它的功能擴充完整。例如，當使用者添加到購物車中的商品價值超過100 美元的時候，我們會給他10 美元的折扣。我們將會使用下面這種模板：

 

1.  
2.  
3. {{item.title}}
5. {{item.price | currency}}
6. {{item.price * item.quantity | currency}}
7.  
8. Total: {{totalCart() | currency}}
9. Discount: {{bill.discount | currency}}
10. Subtotal: {{subtotal() | currency}}
11.  

而CartController 看起來可能像下面這樣：

 

1. function CartController($scope) {
2. $scope.bill = {};
3. $scope.items = [
4. {title: 'Paint pots', quantity: 8, price: 3.95},
5. {title: 'Polka dots', quantity: 17, price: 12.95},
6. {title: 'Pebbles', quantity: 5, price: 6.95}
7. ];
8. $scope.totalCart = function() {
9. var total = 0;
10. for (var i = 0, len = $scope.items.length; i < len; i++) {
11. totaltotal = total + $scope.items[i].price * $scope.items[i].quantity;
12. }
13. return total;
14. }
15. $scope.subtotal = function() {
16. return $scope.totalCart() - $scope.discount;
17. };
18. function calculateDiscount(newValue, oldValue, scope) {
19. $scope.bill.discount = newValue > 100 ? 10 : 0;
20. }
21. $scope.$watch($scope.totalCart, calculateDiscount);
22. }

注意CartController 的底部，我們在totalCart() 的值上面設定了一個監控，用來計算此次購物的總價。只要這個值發生變化，監控器就會調用calculateDiscount(), 然後我們就可以把折扣設定為相應的值。如果總價超過100 美元，我們將會把折扣設定為10 美元。否則，折扣為0。

圖2-1 展示了使用者將會看到的效果。