Angularjs 模态在结果发回之前更新我的父范围答案

【问题标题】：Angularjs modal is updating my parent scope before the results sent backAngularjs 模态在结果发回之前更新我的父范围
【发布时间】：2018-04-30 13:51:42
【问题描述】：

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

父控制器代码：

const modalInstance = $modal.open({ templateUrl: '/app/modal.html', 控制器：“模态控制器”，控制器作为：'模态'，解决：{
mappedData: () => parentCntrl.groupData } });
```
        modalInstance.result.then(result => {
            if (result) {                   
                parentCntrl.groupData = result;
            }
        });
```
儿童控制器代码：

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

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

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

因为您传递的数据是非原始类型，所以不是数字或字符串，例如，这将通过引用复制到内存中。

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

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

【讨论】：

一般来说你是对的。但这不是因为 Angular 以某种方式在对象上设置了观察者（它既不在指令的参数列表中，也不是显式 watcher() 调用的一部分。而是 JS 处理对象值的一种方式——它们是通过引用传递的。所以改变它在一个地方，你可以在任何地方改变它
感谢@mindparse 的提示。同意-skyboyer ...不知何故我错过了这个基本的，现在我记得我以前处理过这个。感谢您的及时帮助。

【解决方案2】：

当您实例化 $uibModal 时，您定义了一个配置对象，其中设置 scope : 应该是此模式将使用的对象引用（作为范围）。定义像scope: $scope 这样的东西是很正常的。这样，如果模态控制器内的变量与父范围内的变量具有相同的名称，则分配将发生在同一个对象上。正如一些 cmets 所说，使用angular.copy() 是一个好主意，或者可能是一个简单的$rootScope.new();

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

希望对你有帮助

【讨论】：

【解决方案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>

【讨论】：