$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./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',function(newValue,oldValue){$scope.count ++;if($scope.count > 30){$scope.name='已经大于30次了';}});//监听模型data data每次改变时 都会执行传入的函数//设置$watch方法的第三个参数为true 指示监听的是一个对象(该对象的每个属性变化都执行函数)$scope.$watch('data',function(newValue,oldValue){console.log($scope.data === newValue); //永远是trueconsole.log($scope.data === oldValue); //页面初始化后是true,data改变之后永远是falseconsole.log('新值: '+newValue.name+' 旧值: '+oldValue.name);},true);});</script></body></html>
页面执行结果:
如果觉得《angularJS $scope的$watch方法监听model改变》对你有帮助,请点赞、收藏,并留下你的观点哦!