angularJS 里的$watch的用法

描述

$watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。

$scope.$watch(watchObj,watchCallback,ifDeep)

watchObj：

需要被检测的对象,可以是以下任意一种:
1.某个数据,监测这个数据的值是否发生变化；
2.一条angular表达式,监测表达式的结果是否发生变化；
3.函数(),监测函数的返回值是否发生变化；
注意:以上都是字符串格式,并且都是在$scope作用域下执行的。

watchCallback：

监听到变化时执行的函数。

watchCallback (newValue,oldValue,scope)

1.newValue: watchObj的新的值；
2.oldValue: watchObj的旧的值；
3.scope: 就是当前控制器的$scope；
注意:函数或者表达式不是在$scope作用域下执行的,所以,如果是需要调用当前作用域下的某个函数,应该是scope.watchCallback

ifDeep：

布尔值，是否深度监听。
ifDeep值设置为true, 那么angular会检测被监控对象的每个属性是否发生了变化。

其它

$watch监听的几种用法

1.$watch 单一的变量

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

2.$watch 多个变量

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

3.$watch对象或数组

// 当是一个对象或数组时，需要加true，否则是监听不到对象或数组变化的。
$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

4.$watch 函数的返回结果

//监听未完成的任务个数count
$scope.unDoneCount = function() {
    var count = 0;
    angular.forEach($scope.todoList, function(todo) {
        count += todo.done ? 0 : 1;
    });
    return count;
};
//单选影响全选部分
$scope.$watch('unDoneCount()', function(nv) {
    $scope.isDoneAll = nv ? false : true;
});

$watch和watchGroup/watchCollection/observe

1.$observe是angular指令中link函数第三个参数 ( attrs ) 的一个方法. 只能在指令的link函数中使用它. 它是通过$evalAsync函数实现监控的。
2.$watchGroup是用来监听一组表达式。数组中任意表达式的变化都会触发监听函数。

$scope.teamScore = 0;
$scope.time = 0;
$scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) {
        ···
});

3.$watchCollection用来监听一个对象（包括数组），当这个对象的任意属性发生变化时，触发监听函数。和$watch一样，第一次参数可以是一个返回一个对象的函数。

$scope.names = ['igor', 'matias', 'misko', 'james'];
$scope.$watchCollection('names', function (newVal, oldVal) {
        ···
});

4.$observe, $watch, $watchGroup, $watchCollection都返回一个移除监听的函数。当需要取消监听的时候，直接调用。

var off = scope.$watch('name', function(newValue, oldValue){
});
off();

以上出现相关的几个方法介绍

1.$parse,$eval这两个函数都可以解析表达式的值。它们的区别在于$parse是一个服务，可以注入使用。$eval是$scope对象上的一个方法，我们只能在能访问$scope的场景下使用它。
2.$evalAsync和$eval一样用来解析表达式的值。但它并不会立刻计算表达式的值，而是将表达式缓存起来，等到下一次$digest（脏检查）的时候执行。以获取更好的性能。

最后编辑于：2018.10.25 15:09:00