$scope有个$watch方法,可以监听指定的model的改变,一旦model改变则触发(执行)传入其中的方法,该方法接收三个参数,如下
$scope.$watch('要监听的model名',function(newValue,oldValue){ },bool值指示是否监听的是对象),
其中newValue指向所监听的model,即两者是一回事,而oldValue则是所监听model此次改变前的拷贝。
示例:
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div 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> </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',oldValue){ $scope.count ++; if($scope.count > 30){ $scope.name='已经大于30次了'; } }); //监听模型data data每次改变时 都会执行传入的函数 //设置$watch方法的第三个参数为true 指示监听的是一个对象(该对象的每个属性变化都执行函数) $scope.$watch('data',oldValue){ console.log($scope.data === newValue); //永远是true console.log($scope.data === oldValue); //页面初始化后是true,data改变之后永远是false console.log('新值: '+newValue.name+' 旧值: '+oldValue.name); },true); }); </script> </body> </html>
页面执行结果: