angular $scope.$watch

時間 2019-11-24

原文原文鏈接

在$scope內置的全部函數中，用得最多的可能就是$watch 函數了。當你的數據模型中某一部分發生變化時，$watch函數能夠向你發出通知。css

你能夠監控單個對象的屬性，也能夠監控須要通過計算的結果（函數）。html

實際上只要可以被看成屬性訪問到，或者能夠看成一個JavaScript函數被計算出來，就能夠被$watch 函數監控。bootstrap

它的函數簽名爲$watch(watchFn, watchAction, deepWatch)數組

watchFn

該參數是一個帶有Angular表達式或者函數的字符串，它會返回被監控的數據模型的當前值。這個表達式將會被執行不少次，因此你要保證它不會產生其餘反作用。也就是說，要保證它能夠被調用不少次而不會改變狀態。基於一樣的緣由，監控表達式應該很容易被計算出來。若是你使用字符串傳遞了一個 Angular表達式，那麼它將會針對調用它的那個做用域中的對象而執行。app

watchAction

這是一個函數或者表達式，當watchFn 發生變化時會被調用。若是是函數的形式，它將會接收到watchFn的新舊兩個值，以及做用域對象的引用。函數

其函數簽名爲function(newValue, oldValue, scope)。spa

deepWatch

若是設置爲true，這個可選的布爾型參數將會命令Angular去檢查被監控對象的每一個屬性是否發生了變化。若是你想要監控數組中的元素，或者對象上的全部屬性，而不僅是監控一個簡單的值，你就可使用這個參數。因爲Angular須要遍歷數組或者對象，若是集合比較大，那麼運算負擔就會比較重。code

註銷監控器

$watch 函數會返回一個函數，當你再也不須要接收變動通知時，能夠用這個返回的函數註銷監控器。orm

若是咱們須要監控一個屬性，而後接着註銷監控，咱們可使用如下代碼：
...
var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
…
dereg();htm

示例代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/angular.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
    </head>

    <body ng-app="myApp">
        <div style="padding: 100px 500px 100px;" ng-controller="CartController">
            <form class="form" role="form">
                <div class="form-group" ng-repeat="item in items">
                    <span class="label label-default">{{item.title}}</span>
                    <input class="form-control" ng-model="item.quantity">
                    <span class="label-success"><div class="label label-info">單價：</div>{{item.price | currency}}</span>
                    <span class="label-success"><div class="label label-info">總價：</div>{{item.price * item.quantity | currency}}</span>
                </div><br />
                <div class="label label-primary">Total: {{totalCart() | currency}}</div>
                <div class="label label-danger">Discount: {{discount | currency}}</div>
                <div class="label label-primary">Subtotal: {{subtotal() | currency}}</div>
            </form>
        </div>
        
        <script src="js/CartController.js"></script>
    </body>

</html>

CartController.js

var app = angular.module('myApp', []);
app.controller('CartController', CartController);
CartController.$inject = ['$scope'];

function CartController($scope) {
    $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.discount = newValue > 100 ? 10 : 0;
    }
    var dereg = $scope.$watch($scope.totalCart, calculateDiscount);
//    dereg();
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。