在NG-电网范围从混乱模式返回数据时 [英] 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

我的人员名单（ $ scope.persons ），以显示在NG-网格。每一行都有一个编辑按钮。当用户点击该按钮（ NG-点击=编辑（行））（见code以下），我复制显示的人（ 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 前和修改后，一切看起来不错。然而，吴格似乎并不关心。它仍然运行在一个不同的（旧） $ 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 =人，直接设置行，一切都在NG-电网看起来不错。然而，作为底层数据模型不正确更改，度假村将再次调出旧的（未修正）的人。

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.

下面是我的编辑功能的code：

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;

虽然这是正确的，并给出了期望的结果（如日志报表显示），人员[指数]现在指向不同的内存位置。

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-电网内部仍然指向旧的存储位置！ NG-电网已没有记忆的指针（人[指数]）作为数据模型，而是背诵原来的指针（*人[指数]）[对不起我的C-时尚说话]的目的地。我会认为这是NG-电网恕我直言，一个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 [指数] =人;与angular.extend（$ scope.persons [指数]的人）;一切工作正常。

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

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