监视指令范围不起作用

Watch directive scope not working

本文关键字：不起作用 范围 指令 监视      更新时间：2023-09-26

>上下文

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

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

因此，在按下快捷方式时，图表应使用新值更新。

控制器 

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不会触发，而数组会更新

我在代码中找不到错误

你向数组中添加了一些东西，但数组本身保持不变。常规观察程序仅对更改的值做出反应。这就是为什么 Angular 还提供$watchCollection：

$scope.$watchCollection("observation",

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

相关文章：