angularjs指令監視未在對象函數屬性上觸發

Question

TL; DR：當該屬性為function時，更新監視對象上的屬性似乎不會觸發監視。

現場例子

請參閱此Plnkr示例 。

可以通過單擊示例中的按鈕來更改config對象的屬性。 對象是同步的（在指令和控制器之間），並且在更改屬性時，將調用指令中的$watch函數（在這種情況下，該函數只是增加一個計數器）。 除了當函數屬性更改時，這是我不明白的。

死的例子

視圖

<main-dir config="configObject"></main-dir> 

指示

myApp.directive('mainDir', function () {

    return {
        restrict: 'E',
        scope: {config: '='},
        link: function (scope, el) {

            //(initialisation code)

            scope.$watch("config", function (config) {
                if (!config) return;
                // do stuff with config object
            }, true);

         }
     };
 });   

調節器

//init:
$scope.configObject = {
    propA: "value",
    propB: [1,2,3],
    propC: {key0: 3, key1: "value"},
    propD: function(x) {return x+1;}
}

//elsewhere:
$scope.configObject.propA = "other value"; //fires watch in directive
//or
$scope.configObject.propB = [3,2,1]; //fires watch in directive
//or
$scope.configObject.propB.push(5); //fires watch in directive
//or
$scope.configObject.propC = {key0: 1, key2: 34}; //fires watch in directive
//or
$scope.configObject.propC["key100"] = "newValue"; //fires watch in directive
//
// ... BUT ...
//
$scope.configObject.propD = function (x) {return x+2;} //does NOT fire watch in directive

簡而言之：我可以使$watch在對象屬性更改時觸發。 但是，如果該屬性是一個函數，那似乎不起作用。

解決方法：
當更改一個函數的屬性時，我添加了一條更改非函數屬性的行以觸發手表，如下所示：

$scope.configObject.propD = function (x) {/*...new function def...*/};
$scope.configObject.xxx = Math.random(); //<-- causes watch to fire

有人知道為什么會這樣嗎？ 是否可以使$watch在config對象的功能屬性更改時觸發？

謝謝！

Answer 1

scope。$ watch（“ config.propD”）將監視對函數的引用，而不是返回值scope。$ watch（“ config.xxx”）將監視Math.random的返回值，因為您調用了function

最簡單的方法是使用$ watchCollection 文檔，但這不是完美的方法

  scope.$watchCollection('config',
    function(config) {
      scope.caught++;
    }
  );

另一種方法是對$ watch'ers的集合進行編程，它的工作會稍微好一些：

  angular.forEach(scope.config, function(value, key) {
    scope.$watch(function() {
      return scope.config[key];
    }, function(config) {
      scope.caught2++;
    }, true);
  });