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