Question

我从我的网页上启动了一个模式，我正在对我从父母传递的数组进行一些更改，但是在关闭模式后发回更新的结果之前我的父范围对象正在更新。如果用户改变主意不更新然后取消模式，我不希望在我的父控制器上看到这些更改

家长控制器代码：

const modalInstance = $ modal.open（{ templateUrl：＆＃39; /app/modal.html'，控制器：＆＃39; modalController＆＃39;， controllerAs：＆＃39; modal＆＃39;，解决：{
mappedData :(）=＆gt; parentCntrl.groupData } }）;
```
        modalInstance.result.then(result => {
            if (result) {                   
                parentCntrl.groupData = result;
            }
        });
```
儿童控制器代码：

modal.ok =（）=＆gt; { $ modalInstance.close（modal.mappedData）; };

modal.close =（）=＆gt; { $ modalInstance.close（）; };

Answer 1

因为您传递的数据是非基本类型，因此不是数字或字符串，例如，这将通过内存中的引用进行复制。

您应该复制数据并在模态中使用复制的版本，并在保存模态时使用复制的版本将任何更改合并回父控制器中的原始对象

这里提出了一个非常类似的问题Using AngularJS "copy()" to avoid reference issues以及如何使用angular.copy（）来避免引用问题

Answer 2

当您实例化$ uibModal时，您定义了一个配置对象，其中设置scope :应该是此模式将使用的对象引用（作为范围）。定义类似scope: $scope的内容是很正常的。这样，如果模态控制器内的变量与父作用域中的变量具有相同的名称，则对同一对象进行赋值。正如一些评论所说，angular.copy()的使用是个好主意，也可能是简单的$rootScope.new();

var modalInstance = $uibModal.open({
  ...
  scope : $rootScope.new(),
  //or
  scope : angular.copy($scope)
  ...
});

我希望这会有所帮助

Answer 3

您也可以尝试以下简单代码。

HTML：

<tr ng-repeat="users in list">
  <td>{{users.firstname}}</td>
  <td>{{users.lastname}}</td>
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" ng- 
  click="selectUser(users)">Edit Info</button>
</tr>

控制器：

$scope.selectUser = function(users){ $scope.clickedUser = users; $scope.modalInfo = angular.copy($scope.clickedUser); };

模式：

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h2 class="modal-title">Update bio</h2>
        </div>
        <div class="modal-body">
            <input type="text" ng-model="modalInfo.firstname">
            <input type="text" ng-model="modalInfo.lastname">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Angularjs模式在发回结果

3 个答案: