AngularJS的$watch用法


$watch簡單使用

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

 

$watch(watchExpression, listener, objectEquality);

每個參數的說明如下:

  1. watchExpression:監聽的對象,它可以是一個angular表達式如'name',或函數如function(){return $scope.name}。

  2. listener:當watchExpression變化時會被調用的函數或者表達式,它接收3個參數:newValue(新值), oldValue(舊值), scope(作用域的引用)

  3. objectEquality:是否深度監聽,如果設置為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那么你應該使用它

 

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

$scope.name = 'hello';

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

        console.log(newValue);

        console.log(oldValue);

});

$timeout(function(){

        $scope.name = "world";

},1000);

 監測多個屬性

貼出一個具體的demo

<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>

 

 

$watch性能問題

太多的$watch將會導致性能問題,$watch如果不再使用,我們最好將其釋放掉。

$watch函數返回一個注銷監聽的函數,如果我們想監控一個屬性,然后在稍后注銷它,可以使用下面的方式:

var watch = $scope.$watch('someModel.someProperty', callback);

//...

watch();

 

還有2個和$watch相關的函數:

$watchGroup(watchExpressions, listener);

$watchCollection(obj, listener);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM