javascript - 观察 Angular Controller 内的数组变化并更新 HTML

Question

我想观察 Angular Controller 内的数组变化并更新 HTML View 。

这是我的 Controller :

app.controller("timelineCtrl", function ($scope) {
    $scope.arr=[];
         .
         .
         .
}

这是我的指令:

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div> Hello {{arrayItem}} </div>',

        link: function ($scope, element, attrs) {

            $scope.$watch($scope.arr, function(newValues, oldValues) {
                $scope.arrayItem = newValues;
            });

        }
    };
});

我通过单击按钮向数组添加一些新值，但我的 $watch 不起作用。我该如何克服这个问题？

Answer 1

当前您的 watch 未触发，因为 $scope.arr 变量包含相同的引用 - 对与最初相同的数组的引用，现在仅此数组中包含的值发生了更改。 (这是因为 JavaScript 中的数组仅通过引用传递，而不是始终复制的基元)

如果您希望监视“更深入”，而不仅仅是检查此引用，并查找对象内容的更改，您可以添加第三个具有真值的 bool 参数，如下所示:

$scope.$watch(
   '$scope.arr', //expression to watch - can also be a function returning a value
   function(newValues, oldValues) { //function to run on change
     $scope.arrayItem = newValues;
   },
   true //deep watch mode?
);

请注意，“深度”观察可能非常昂贵，因为它将检查每个嵌入对象的每个最后属性。如果您只想查看某个元素是否被删除或添加到数组中，可以使用 $watchCollection ，只观察浅层，向下 1 级，并且具有更好的性能。