Angularjs 模态正在更新我的父作用域，然后返回结果

Question

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

父控制器代码：

const 模态实例 = $modal.open({ templateUrl: '/app/modal.html', 控制器：'modalController'，控制器为：'modal'，解决：{
映射数据：() => parentCntrl.groupData } });
```
        modalInstance.result.then(result => {
            if (result) {                   
                parentCntrl.groupData = result;
            }
        });
```
子控制器代码：

modal.ok = () => { $modalInstance.close(modal.mappedData); };

modal.close = () => { $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 模态正在更新我的父作用域，然后返回结果

Angularjs modal is updating my parent scope before the results sent back

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap