$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>
页面执行结果：
原文链接：https://www.f2er.com/angularjs/148746.html