在scope內(nèi)置的所有函數(shù)中，用得最多的可能就是$watch 函數(shù)了，當(dāng)你的數(shù)據(jù)模型中某一部分發(fā)生變化時，$watch函數(shù)可以向你發(fā)出通知。你可以監(jiān)控單個對象的屬性，也可以監(jiān)控需要經(jīng)過計(jì)算的結(jié)果（函數(shù)），實(shí)際上只要能夠被當(dāng)作屬性訪問到，或者可以當(dāng)作一個JavaScript函數(shù)被計(jì)算出來，就可以被$watch 函數(shù)監(jiān)控。它的函數(shù)簽名為$watch(watchFn, watchAction, deepWatch)

其中每個參數(shù)的詳細(xì)含義如下。
watchFn

該參數(shù)是一個帶有Angular表達(dá)式或者函數(shù)的字符串，它會返回被監(jiān)控的數(shù)據(jù)模型的當(dāng)前值。這個表達(dá)式將會被執(zhí)行很多次，所以你要保證它不會產(chǎn)生其他副作用。也就是說，要保證它可以被調(diào)用很多次而不會改變狀態(tài)。基于同樣的原因，監(jiān)控表達(dá)式應(yīng)該很容易被計(jì)算出來。如果你使用字符串傳遞了一個Angular表達(dá)式，那么它將會針對調(diào)用它的那個作用域中的對象而執(zhí)行。
watchAction

這是一個函數(shù)或者表達(dá)式，當(dāng)watchFn 發(fā)生變化時會被調(diào)用。如果是函數(shù)的形式，它將會接收到watchFn的新舊兩個值，以及作用域?qū)ο蟮囊谩Ｆ浜瘮?shù)簽名為function(newValue, oldValue, scope)。
deepWatch

如果設(shè)置為true，這個可選的布爾型參數(shù)將會命令A(yù)ngular去檢查被監(jiān)控對象的每個屬性是否發(fā)生了變化。如果你想要監(jiān)控?cái)?shù)組中的元素，或者對象上的所有屬性，而不只是監(jiān)控一個簡單的值，你就可以使用這個參數(shù)。由于Angular需要遍歷數(shù)組或者對象，如果集合比較大，那么運(yùn)算負(fù)擔(dān)就會比較重。

$watch 函數(shù)會返回一個函數(shù)，當(dāng)你不再需要接收變更通知時，可以用這個返回的函數(shù)注銷監(jiān)控器。

如果我們需要監(jiān)控一個屬性，然后接著注銷監(jiān)控，我們可以使用以下代碼：
...
var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
…
dereg();

我們再回到第1章的購物車案例，把它的功能擴(kuò)充完整。例如，當(dāng)用戶添加到購物車中的商品價(jià)值超過100美元的時候，我們會給他10美元的折扣。我們將會使用下面這種模板：
<div ng-controller="CartController">
? <div ng-repeat="item in items">
??? <span>{{item.title}}</span>
??? <input ng-model="item.quantity">
??? <span>{{item.price | currency}}</span>
??? <span>{{item.price * item.quantity | currency}}</span>
? </div>
? <div>Total: {{totalCart() | currency}}</div>
? <div>Discount: {{bill.discount | currency}}</div>
? <div>Subtotal: {{subtotal() | currency}}</div>
</div>

而CartController看起來可能像下面這樣：
function CartController($scope) {
? $scope.bill = {};
? $scope.items = [
??? {title: 'Paint pots', quantity: 8, price: 3.95},
??? {title: 'Polka dots', quantity: 17, price: 12.95},
??? {title: 'Pebbles', quantity: 5, price: 6.95}
? ];
? $scope.totalCart = function() {
??? var total = 0;
??? for (var i = 0, len = $scope.items.length; i < len; i++) {
????? total = total + $scope.items[i].price * $scope.items[i].quantity;
??? }
??? return total;
? }
? $scope.subtotal = function() {
??? return $scope.totalCart() - $scope.discount;
? };
? function calculateDiscount(newValue, oldValue, scope) {
??? $scope.bill.discount = newValue > 100 ? 10 : 0;
? }
? $scope.$watch($scope.totalCart, calculateDiscount);
}

注意CartController 的底部，我們在totalCart() 的值上面設(shè)置了一個監(jiān)控，用來計(jì)算此次購物的總價(jià)。只要這個值發(fā)生變化，監(jiān)控器就會調(diào)用calculateDiscount() , 然后我們就可以把折扣設(shè)置為相應(yīng)的值。如果總價(jià)超過100美元，我們將會把折扣設(shè)置為10美元。否則，折扣為0。

?

angular

總結(jié)

以上是生活随笔為你收集整理的angular $watch的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。