AngularJS $observe $watch

　　$observe $watch均可以用来监听值的变化，可是他们有显著的区别。$observe是用来监视DOM属性值的变化，而 $watch监视scope属性值的变化。AngularJS中的监听，都知道的有$watch，还有一种监听是$observe，$watch主要监听的是$scope上的属性，而$observe监听的是directive中attrs上的属性。

　　attrs.$observe('attr1', ....)

　　scope.$watch(“model.property”...)

1、要点

   一、$watch

• $watch()是angular上scope对象的一个方法。
• 任何一个控制器中，可是不推荐在在控制器中使用$watch()；由于这样使得测试和维护变得很困难。
• 任何一个指令中，能够在指令的link函数中使用，这是一种推荐的方式。
• 他不但能够监测angular expression的变化，还能够检测function(){}函数的变化，监测angular expression的时候会使用$parse将angular expression解析为一个函数，这个函数会在angular的每一个脏值检查循环中被调用。

　二、$observe

• $observe()是angular指令中link函数中实例属性即（iAttr）的一个方法。
• 只能够在指令中使用，也是在指令的link函数中使用。
• 它只可以监测angular expression的变化，监测的方式和上面$watch()监测angular expression的方式同样。

2、区别

　　$observe是属性对象上的方法，所以它是用来监控DOM属性上的值的变化，它仅用在指令内部，当你须要在指令内部监控包含有插值表达式({{}})的DOM属性的时候，就要用到这个方法，好比，

　　attr1="Name:{{name}}",

　　而后在指令里面：attrs.$observe('attr1', ....),

　　可是假如你只用scope.$watch(attrs.attr1,...),这种状况下是无效的，由于{{}}没法被解析，因此你获得的是undefined, 在其余状况下用$watch。

一、指令(不使用隔离的做用域)

　　在不使用隔离的做用域的指令中，$watch()只可以监测不带有插值标记({{}})的angular expression，好比在<div attr1='expr' attr2='{{expr}}'></div>中，只能够监测attr1='expr'中的attr1，监测attr2只可以获得一个undefined，由于存在{{}}插值符号。

　　在不使用隔离的做用域的指令中，$observe()只可以监测带有插值标记的angular expression，好比在<div attr1='expr' attr2='{{expr}}'></div>中，只能够监测attr2='{{expr}}'中的attr2，监测attr1只会获得一个一成不变的字符串expr。

二、指令(使用隔离的做用域)

　　在使用隔离的做用域的指令中，$watch()也能够监测带有插值标记({{}})的angular expression；由于使用了@或者=前缀标识符，它们已经帮咱们实现了插值，因此能够这样使用。

3、例子

一、$watch

　　　　currentChargeType为$scope上的内容

var initWatch = function () {
    var closeWatchMethod = $scope.$watch('currentChargeType', function (newValue, oldValue) {
        if (!newValue) return;
        $scope.currentChargeApplyType = chargeBaseToolUtil.upperWordFirst(newValue) + 'Charge';
        initComboBox();
        closeWatchMethod();
    });
};

二、$observe

  attrs.$observe('popShow', function (val) {
                    $timeout(function () {
                        var event = (val && (val == 'true' || val == true)) ? 'show' : 'hide';
                        element.popover(event);
                    });
                });