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

猜你喜欢