从模态返回数据时ng-grid中的范围混淆

Question

这是 Plunker：http://plnkr.co/edit/aqLnno?p=preview

我有一个要显示在 ng-grid 中的人员列表 ($scope.persons)。每行都有一个编辑按钮。当用户单击按钮 (ng-click="edit(row)")（参见下面的代码）时，我复制显示的人 (angular.copy(row.entity)) 并打开一个模式对话框。 ...到目前为止一切顺利。

当用户在模式上单击“取消”时，什么也没有发生。当用户在模型上点击“保存”时，修改后的人会被返回，应该在$scope.persons中“重新整合”。

这就是问题的开始：我在$scope.persons 中搜索以找到正确的人并将其替换为从模态返回的人。日志语句显示修改前后的$scope.persons，一切看起来都很好。但是，ng-grid 似乎并不在意。它仍然在不同的（旧的）$scope.persons 上运行。

如果我取消注释 row.entity = person 并直接设置行，那么在 ng-grid 中一切看起来都很好。但是，由于底层数据模型没有正确更改，因此度假村将再次调出旧的（未修改的）人。

这是我的编辑功能的代码：

$scope.edit = function(row) {
  $modal.open({
    templateUrl: 'personEdit.html',
    backdrop: true,
    windowClass: 'modal',
    controller: 'PersonModalInstanceCtrl',
    resolve: {
      person: function() {
        return angular.copy(row.entity);
      }
    }
  })
    .result.then(function(person) {
      $log.log('Edited person: ' + JSON.stringify(person));
      angular.forEach($scope.persons, function(p, index) {
        $log.log('p: ' + JSON.stringify(p) + ' index: ' + index);
        if (p.id == row.entity.id) {
          $log.log('scope: ' + JSON.stringify($scope.persons));
          $scope.persons[index] = person;
        }
      });
      $log.log('scope: ' + JSON.stringify($scope.persons));
      // row.entity = person;
    }, function() {});
};

我的示波器做错了什么？

感谢您的帮助

Answer 1

好的。又学到了一些东西。 jantimon的回答为我指明了正确的方向。但我不喜欢他如何更改我的 $scope.persons 数组（我从 RESTful GET 中获得了这个数组，并且喜欢我可以直接将返回的 JSON 用作 $scope.persons 而无需修改）。

不管怎样，解释如下：

从原始 $scope.persons 列表中复制我的人时，我在新的内存位置创建了一个新对象：

angular.copy(row.entity)

这是必要的，因为用户可以“取消”他的编辑。

当用户点击“保存”时，我必须把这个复制的人放回 $scope.persons 而不是旧的。我这样做了：

$scope.persons[index] = person;

虽然这是正确的并且给出了期望的结果（如日志语句所示），但 people[index] 现在指向不同的内存位置。

但是：ng-grid 内部仍然指向旧的内存位置！ ng-grid 没有将指针 (person[index]) 记住为数据模型，而是记住了原始指针 (*person[index]) 的目的地 [对不起我的 C 风格谈话]。我会认为这是 ng-grid 恕我直言的 BUG。

所以我需要做的就是将新人复制回它来自的完全相同的内存位置。幸运的是，有一个角度指令：

angular.extend($scope.persons[index], person);

如果你只是替换 $scope.persons[index] = person;使用 angular.extend($scope.persons[index], person);一切正常。

Answer 2

当您更改数组时，看起来 ng-grid 没有正确更新

您可以像在此示例中一样保留行实体的指针：http://plnkr.co/edit/0lDoKOg4kXXa51NlSuMg?p=preview

它使用$scope.persons[index].data = person.data; 而不是$scope.persons[index] = person;。