从模态返回数据时 ng-grid 中的范围混淆 [英] Scope confusion in ng-grid when returning data from modal

问题描述

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

Here is the Plunker: http://plnkr.co/edit/aqLnno?p=preview

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

I have a list of persons ($scope.persons) to be displayed in a ng-grid. Each line has a edit button. When the user clicks on the button (ng-click="edit(row)") (see code below), I copy the displayed person (angular.copy(row.entity)) and open a modal dialog. ... so far so good.

当用户在模态上点击取消"时，什么也没有发生.当用户在模型上单击保存"时，将返回修改后的人，并应在 $scope.persons 中重新集成".

When the user clicks "Cancel" on the modal, nothing happens. When the user clicks "Save" on the model, the modified person is returned and should be "reintegrated" in $scope.persons.

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

This is where the problem starts: I search in $scope.persons to find the correct person and replace it with the person returned from the modal. The log statements show the $scope.persons before and after the modification and everything looks good. However, the ng-grid doesn't seem to care. It still operates on a different (the old) $scope.persons.

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

If I uncomment the row.entity = person and set the row directly, everything looks fine in the ng-grid. However, as the underlying data model is not changed correctly, a resort will bring up the old (un-modified) person again.

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

Here is the code of my edit function:

$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() {});
};

我的示波器有什么问题?

What am I doing wrong with my scopes?

感谢您的帮助

推荐答案

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

OK. Again something learnt. The answer of jantimon pointed me in the right direction. But I didn't like how he changed my $scope.persons array (I get this array from a RESTful GET and liked the fact that I can just use the returned JSON as $scope.persons without modification).

无论如何，这是解释:

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

When copying my person from the original $scope.persons list I created a new object in a new memory location:

angular.copy(row.entity)

这是必要的，因为用户可以取消"他的编辑.

This is necessary as the user can "Cancel" his edit.

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

When the user clicks "Save" I have to take this copied person and put it back to $scope.persons instead of the old one. I did this with:

$scope.persons[index] = person;

尽管这是正确的并且给出了预期的结果(如日志语句所示)，但 people[index] 现在指向不同的内存位置.

Although this is correct and gives the desired result (as the log statements show), the persons[index] now points to a different memory location.

但是:ng-grid 内部仍然指向旧的内存位置！ng-grid 没有将指针 (person[index]) 记忆为数据模型，而是记忆了原始指针的目的地 (*person[index]) [抱歉我的 C-stylish 说话].恕我直言，我认为这是 ng-grid 中的一个 BUG.

BUT: ng-grid internally still points to the old memory location! ng-grid has not memorized the pointer (person[index]) as the data model but instead has memorized the destination of the original pointer (*person[index]) [sorry for my C-stylish talking]. I would consider this a BUG in ng-grid IMHO.

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

So all I need to do is copy the new person back to the exact same memory location it has come from. Luckily, there is an angular directive for that:

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

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

If you just replace $scope.persons[index] = person; with angular.extend($scope.persons[index], person); everything works fine.

这篇关于从模态返回数据时 ng-grid 中的范围混淆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！