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