工作学习记录--angularjs中的$watch与$observe监听区别

AngularJS中的监听，都知道的有$watch，还有一种监听是$observe，$watch主要监听的是$scope上的属性，而$observe监听的是directive中attrs上的属性。

$watch的使用方法如下

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

$observe 主要是监听 attr上的属性，源代码如下：

$observe: function(key, fn) {  
    var attrs = this,  
        
observers=(attrs.
observers || (attrs.$$observers = {})),  
        listeners = (
observers[key]||(
observers[key] = []));  
  
    listeners.push(fn);  
    $rootScope.$evalAsync(function() {  
      if (!listeners.$$inter) {  
        // no one registered attribute interpolation function, so lets call it manually  
        fn(attrs[key]);  
      }  
    });  
    return fn;  
}

从这里可以看出来它是使用了$rootScope.$evalAsync()方法来监控的。什么是$evalAsync呢？是一个异步解析的操作，是在其他表达式都已经解析之后再解析，这样使它拥有了处理像{{}}插值字符串的机会。$observe是属性对象上的方法，因此它是用来监控DOM属性上的值的变化，它仅用在指令内部，当你需要在指令内部监控包含有插值表达式的DOM属性的时候，就要用到这个方法，比如，attr1="Name:{{name}}",然后在指令里面：attrs.$observe('attr1', ....),但是假如你只用scope.$watch(attrs.attr1,...),这种情况下是无效的，因为{{}}无法被解析，所以你得到的是undefined, 在其他情况下用$watch。