$scope.$watch監聽

時間 2019-11-14

標籤 scope watch 監聽简体版

原文原文鏈接

//angularJS $scope的 $watch 方法監聽model改變
 //$scope有個 $watch 方法，能夠監聽指定的model的改變，一旦model改變則觸發（執行）傳入其中的方法，該方法接收三個參數：
 //$scope.$watch('要監聽的model名'，function(newValue,oldValue){},bool值指示是否監聽的是對象)，
 //其中newValue 指向所監聽的model,即二者是一回事，而oldValue 則是監聽model 這次改變前的拷貝。


eg:

<body ng-app="myApp">
    <div ng-controller="firstController">
        <input type="text" ng-model="name">
        改變次數:{{count}}  新值：{{name}}
        <br/><br/>
        <input type="text" ng-model="data.name">
        改變次數：{{data.count}}  新值：{{data.name}}
    </div>

<script>    var app = angular.module('myApp',[]);    app.controller("firstController",function($scope){        $scope.name = "張三";        $scope.count = 0;        $scope.data = {            name:'李四',            count:0        }        //監聽模型name，name每次改變時 都會執行傳入的參數        //由於name 不是對象，因此沒必要傳第三個參數        $scope.$watch('name',function(newValue,oldValue){            $scope.count++;            if($scope.count>10){                $scope.name = '已經大於10次了';            }        });        //監聽模型data    data每次改變時 都會執行傳入的函數        //設置$watch 方法的第三個參數爲true,指示監聽的是一個對象(該對象的每一個屬性變化都會執行)        $scope.$watch('data',function(newValue,oldValue){            console.log($scope.data==newValue);      //永遠是true;            console.log($scope.data==oldValue);      // 頁面初始化後是true，data改變以後永遠是false;            console.log("新值"+newValue.name+ " 舊值："+oldValue.name);        },true);    });</script></body>

相關標籤/搜索

每日一句

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