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

前端之家收集整理的这篇文章主要介绍了关于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',255);">$watch对象或数组 
 

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

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

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

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

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

原文链接:https://www.f2er.com/angularjs/144923.html

猜你在找的Angularjs相关文章