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

HTML

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

当页面正确加载图表时，显示数据和控制台正确登录$watch正确执行。

无论如何，按下快捷键后，$watch不会被触发，而数组会被更新

我在代码中找不到错误

Answer 1

您向数组添加了一些内容，但数组本身保持不变。常规观察者仅对更改的值作出反应。这就是Angular还提供$watchCollection：

的原因

$scope.$watchCollection("observation",

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

观察指令范围无效

1 个答案: