Question

我创建了这段代码：

    $scope.$watch('grid.view.length', function () {
        if ($scope.grid.view != null) {
            var a = $scope.grid.view.length;
            var pane = $('.scroll-pane').jScrollPane();
            pane.data('jsp').reinitialise();
        }
    })

grid.view是一个数组。我需要做的就是查看元素的数量是否会发生变化但是当它内部的元素数量发生变化时，这似乎不会触发手表。我做错了吗？

Maxim的评论听起来像是一个解决方案，但我现在不确定。最好只设置一个保持长度的$ scope变量并观察它。我担心如果它做了很多深刻的比较，那么这可能是一个性能问题。注意grid.view非常大。

Answer 1

使用标记true进行深入观察：

尝试：

$scope.$watch('grid.view.length', function () {
        if ($scope.grid.view != null) {
            var a = $scope.grid.view.length;
            var pane = $('.scroll-pane').jScrollPane();
            pane.data('jsp').reinitialise();
        }
    }, true)

Answer 2

您的担忧是合理的。来自文档：

要保存对象的值以供以后比较，请使用angular.copy函数。这也意味着观看复杂的选项会对内存和性能产生不利影响。

使用另一个只保留长度的范围变量在你的情况下是一种过度杀伤。

$watch也接受函数作为参数。返回值的更改会触发对侦听器的调用：

$scope.$watch(function($scope){
    return grid.view.length;
},function(newValue, oldValue){
    /* do something */
    console.log("yeah! "+newValue);
});

如何观察AngularJS中数组中项目数量的变化？

2 个答案: