javascript - 观察模型变化

Question

我的指令的链接函数中有以下代码:

link: function (scope, elem, attrs, ngModel) {
        $(elem).datagrid({
            columns: [[
                { field: 'ck', checkbox: 'true' },
                { field: 'ProjectID', title: 'Project ID', width: '30%' },
                { field: 'Name', title: 'Name' }
            ]]                
        });
        ngModel.$render = function (value) {
            $(elem).datagrid('loadData', ngModel.$viewValue);
        };
        scope.$watch('projectList', function (newValue, oldValue) {
            $(elem).datagrid('loadData', ngModel.$viewValue);
        });

    }

当数组 $scope.projectList 最初分配了数据时，两个监听器都会被触发。在我的 Controller 中的某个位置(仅用于测试)我将另一个元素添加到 $scope.projectList:

$scope.test = function () {
    var project = $scope.projectList[0];
    $scope.projectList.push(project);
}

此时没有任何听众被解雇。有人可以解释一下为什么会发生这种情况吗？

谢谢

Answer 1

$watch 仅检查对 projectList 数组的引用是否已更改，它不会对集合执行深度监视。当您将数组分配给作用域变量时，您会更改此引用，但随后修改此数组会保持引用不变。对于您的情况，使用 $watchCollection() 方法似乎更合适。

但值得注意的是，$watchCollection 仅检查集合元素引用是否已更改，例如通过添加/删除/替换项目。它不会检查这些元素本身是否已被修改。

如果您想深入监视您的集合，请将 true 作为第三个参数传递给 $watch()。

scope.$watch('projectList', function (newValue, oldValue) {
    $(elem).datagrid('loadData', ngModel.$viewValue);
}, true);  // <--- note the objectEquality flag set to true

但请注意，如果集合中的项目很复杂并且需要更多时间来比较它们，这可能会对性能产生影响。

您还可以查看Angular docs有关 $scope 的更多信息(向下滚动一点以查看 $watch() 和 $watchCollection() 方法说明)。