AngularJS的$watch用法

時間 2019-12-01

標籤 angularjs watch 用法欄目 AngularJS 简体版

原文原文鏈接

$watch簡單使用javascript

$watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。java

$watch(watchExpression, listener, objectEquality);數組

每一個參數的說明以下：app

watchExpression：監聽的對象，它能夠是一個angular表達式如'name',或函數如function(){return $scope.name}。函數
listener:當watchExpression變化時會被調用的函數或者表達式,它接收3個參數：newValue(新值), oldValue(舊值), scope(做用域的引用)性能
objectEquality：是否深度監聽，若是設置爲true,它告訴Angular檢查所監控的對象中每個屬性的變化. 若是你但願監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麼你應該使用它spa

舉個例子：這是監測一個屬性的變化code

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

        console.log(newValue);

        console.log(oldValue);

});

$timeout(function(){

        $scope.name = "world";

},1000);

監測多個屬性對象

貼出一個具體的demoblog

<body ng-app="app" ng-controller="first">
        <button ng-click="name='a'">1</button>
        <button ng-click="name='b'">2</button>
        <button ng-click="name='c'">3</button>
        <button ng-click="type=2">4</button>
        <button ng-click="type=3">5</button>
        <p>{{name}}</p>
    </body>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("first", function($scope) {
            $scope.name = 'q';
            $scope.type = 1;

            function te() {
                console.log($scope.name+" "+ $scope.type);
            }
            $scope.$watch('name+type', function(newValue, oldValue) {
                te();
            });
        })
    </script>