监视指令范围不起作用

Question

上下文

我的控制器存储一个数组。当按下键盘上的特定快捷方式时，我会向该数组添加一个新对象。

数组在指令中用于显示图表。

因此，在快捷方式按下图表应该更新新的值。

控制器

vm.observation = [{
    "sale": "202",
    "year": "2010"
}, {
    "sale": "215",
    "year": "2011"
}, {
    "sale": "179",
    "year": "2012"
}, {
    "sale": "199",
    "year": "2013"
}, {
    "sale": "134",
    "year": "2014"
}, {
    "sale": "176",
    "year": "2015"
}];

指令

angular.module('spwApp.directives')
    .directive('linechart', [function() {
        return {
            restrict: 'E',
            scope: {
                id: "@",
                observation: "="
            },
            link: function($scope, element, attrs) {
                $scope.$watch("observation", function(newVal, oldVal){
                    console.log("OBS : " + newVal);
                }, true);
            }
        }
    }])

<linechart id="linechart3" observation="vm.observation"></linechart>

当页面加载图表时，正确地显示数据，并且控制台正确地登录到$watch中，则正确执行。

无论如何，在按快捷方式之后，$watch不会被触发，而数组将被更新。

我找不到代码中的错误

Answer 1

在数组中添加一些内容，但是数组本身保持不变。常规观察者只对更改的值作出反应。这就是角形也提供$watchCollection的原因

$scope.$watchCollection("observation",

$watchCollection还监视数组的内容，即检查某个内容是否被删除或添加。