关于angularJS的$watch的 一些小用法

$watch方法，它可以帮助我们在每个scope中监视其中的变量。

$watch 单一的变量

对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。

$scope.count=1;
$scope.$watch('count',function(){
    ...
});

$watch 多个变量

对于多个变量的监视变化，执行同一函数的话，可以将这几个变量转为字符串，以‘+’号隔开来进行监视

//当count或page变化时，都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
    ...
});

$watch对象或数组

需要用到$watch的第三个参数，默认省略时为false，若监听对象为数组或对象，需要监听其内每个属性或元素的变化则需要设为true。

$scope.items=[{a:1},{a:2},{a:3}];
$scope.$watch(function(){},function(){
    ...
},true);

或者将监听对象转换成JSON字符串形式：

$scope.items=[{a:1},{a:2},{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) {
    ...
});

2、监视匿名函数：第一个参数直接写匿名函数

$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
    }
});

转自：http://blog.csdn.net/u010451286/article/details/50635839