从指令添加值时，数组上的 $scope.$watch 未更新

Question

我确定这只是一个新手的错误...这是 plunker：http://plnkr.co/edit/L5702XAtQwBRmzP2kqoA?p=preview

我有一个指令可以根据选中的复选框更新值：

// --- 8< ---
// Detect click on checkbox, get value, etc... then:
// --- 8< ---
scope.$apply(function() {
    if ($this.prop("checked")) {
        selected.push(value);
    } else {
        for (var i = 0; i < selected.length; i++) {
            if (selected[i] == value) {
                selected.splice(i, 1);
                break;
            }
        }
    }

    console.log("selected updated to: " + selected)
});

我正在页面控制器中查看该集合：

$scope.$watch("model.selected", function(selected) {
    console.log("----- Controller updated with: ", selected);
});

此处的console.log 语句仅在页面首次加载时显示一次。但是，在页面上，我有一个显示所选值数组的绑定：

Selected: {{ model.selected }}

这确实更新了。

为什么我的手表也没有更新？

Answer 1

要在集合（即数组）添加、删除、更改值时收到通知，您需要使用 $scope.$watchCollection 方法。

改变这个：

$scope.$watch("model.selected", function(selected) {
    console.log("----- Controller updated with: ", selected);
});

到这里：

$scope.$watchCollection("model.selected", function(selected) {
    console.log("----- Controller updated with: ", selected);
});

这是更新的 plunkr：

http://plnkr.co/edit/f2xCge2ragh5uWKRRwof?p=preview

Answer 2

如果你只需要监控长度变化，那么使用

$scope.$watch("model.selected.length", function() {
    console.log("----- Controller updated with: ", $scope.model.selected);
});

注意：只看长度会快很多。