$watch方法,它可以帮助我们在每个scope中监视其中的变量。
$watch 单一的变量
对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。
$scope.count=1; $scope.$watch('count',function(){ ... });
$watch 多个变量
对于多个变量的监视变化,执行同一函数的话,可以将这几个变量转为字符串,以‘+’号隔开来进行监视
//当count或page变化时,都会执行这个匿名函数 $scope.count=1; $scope.page=1; $scope.$watch('count + page',255);">$watch对象或数组需要用到$watch的第三个参数,默认省略时为false,若监听对象为数组或对象,需要监听其内每个属性或元素的变化则需要设为true。
$scope.items=[{a:1},{a:2},{a:3}]; $scope.$watch(function(){},function(){ ... },true);
或者将监听对象转换成JSON字符串形式:
$scope.items=[{a:1},{a:3}]; $scope.$watch(function(){ return JSON.stringify($scope.items); },function(){ ... },true);$watch 函数返回
监视一个函数返回的结果是否变化。
1、监听命名函数:参数为“函数名()”的字符串,记得加“()”!
//一个命名函数 $scope.unDoneCount = function() { var count = 0; ... return count; }; //监听函数返回 $scope.$watch('unDoneCount()',function(nv) { ... });$scope.$watch(function(){ return $scope.unDoneCount();//不要忘了(),要执行的啊~ },function(nv) { ... });取消$watch
watch的性能消耗很大,所以对于已经不需要的watch需要取消掉,每个watch的返回结果就是这个deregisterWatch()函数
//在chrome的控制台上,断点得到的$watch的返回值 function deregisterWatch() { arrayRemove(array,watcher); lastDirtyWatch = null; }所以取消watch,需要在新建时将返回值保存,取消时调用返回值的函数就可以了。
var count=1; var unbingWatch = $scope.$watch('todoList',function(){ count++; if(count>4){ unbingWatch(); //取消$watch } });