Question

我有一个自举模式。按下关闭按钮时，数组的值会发生变化，但不应该是

。

controller.js

    $scope.open = function(){

    var modalInstance = $modal.open({
        animation: true,
        templateUrl: 'views/view1.html',
        controller: 'controller2',
        resolve: {
            items: function(){
                return $scope.array;
            }
        }
    });
modalInstance.result.then(function (changed_array){
        $scope.array = changed_array;
    },function(){
        // no change
    });
};

第二个控制器的代码

    angular.module('storagewebApp').controller('controller2',function($scope, $modalInstance, items) {
$scope.array = items;
$scope.ok = function(){
    $modalInstance.close($scope.array);
};
$scope.cancel = function(){
    $modalInstance.dismiss('cancel');
};

}）;

view2.html

     <div class="modal-header">

    <h4 class="modal-title">Set threshold</h4>
  </div>
  <div class="modal-body">
  <div class="form-group" align="left">
   <div> E:</div> <input type="text" ng-model="array[0]">
   <div> M:</div><input type="text" ng-model="array[1]">
    <div>T:</div><input type="text" ng-model="array[2]">
    <div>F: </div><input type="text" ng-model="array[3]">
   <div> I:</div><input type="text" ng-model="array[4]">
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-warning" ng-click="cancel()">Close</button>
    <button type="button" class="btn btn-primary" ng-click="ok()">Save</button>
  </div>
</div>

通过输入框更改值，但按下关闭按钮值不应发送到第一个控制器，但是点击关闭按钮时，更改数组的值将传递给第一个控制器。

Answer 1

此行为是一个常见的AngularJS / JavaScript错误。实例化模态控制器时，您将传递数组的引用。然后在你的模态控制器里面你操纵那个参考，即使你没有把它传回去。

当你写：

$scope.array = items

内存中发生的事情是 $ scope.arra y指向与 items 相同的位置。当您以任何方式修改 $ scope.array 的对象时，您也在修改项目。

作为一种解决方案，您需要将初始数组深层复制到新数组中，这样就可以创建新的对象和引用。 AngularJS有一个内置函数，可以执行此操作：https://docs.angularjs.org/api/ng/function/angular.copy

angular.copy

请参阅此plunkr例如：http://plnkr.co/edit/W6EYUwQ1K1YAnfnJ2r4a?p=preview

Answer 2

您应该为模态窗口创建一个新范围。像这样：

var modalScope = angular.extend(
    $scope.$new(), {
        val1ToPassToModal: $scope.originalValue1,
        val2ToPassToModal: $scope.originalValue2,
    });

$modal.open({
    templateUrl: '…',
    controller: '…',
    scope: modalScope,
    resolve: {
        …
    }
});

当然，如果你不想将新值传递给模态窗口，你可以只写：

scope: $scope.$new()。

bootstrap-modal中的关闭按钮

2 个答案: