不要在角度模态中保存范围更改

Posted 2023-02-23

【中文标题】不要在角度模态中保存范围更改

【英文标题】：Don’t save scope changes in angular modal

【发布时间】：2016-06-14 01:37:12

【问题描述】：

我正在使用 Angular UI Bootstrap 模式来更新范围上的数组。除非我单击关闭按钮，否则我不希望保存更改。如果我单击关闭按钮，我不想更新数组。 （这真的是为了尝试模态功能）

不过，我遇到了一些问题。当我在控制器中包含 $modalInstance 时，我收到以下错误： 错误：[$injector:unpr] 未知提供者：$modalInstanceProvider AngularJS inject issue with Angular Bootstrap modal，但我的模板中没有 ng-controller。

另一个问题是，当我尝试修改数组时，它会在模式之外更新。我正在使用$scope.users.push( 'Dave' );。官方demo好像也是这样的，难道是我在$uibModal上调用open方法时传递作用域的方式？

这是 Plunk： http://plnkr.co/edit/FuXjSwtljQtFYOtFRV18?p=preview

【问题讨论】：

您是否将 $uibModalInstance 注入到您的模态控制器中？这可能是错误。

处理数据副本并将更改合并到结果承诺回调中的原始数据

@user2263572 不，我正在注入 $modalInstance。关闭/关闭方法现在正在运行，谢谢

【参考方案1】：

我在你的 plunker 中修改了你的 js 代码，这应该会让你朝着正确的方向前进。它修复了注入器错误并且不会更新 $scope.users 除非您单击“关闭”。按 Esc 关闭模式不应调用“确定”方法。

var app = angular.module('modalExample', ['ui.bootstrap']);

app.controller('ModalDemoController', ['$scope', '$uibModal', function($scope, $uibModal)
  console.log('modal');

  $scope.users = ['Adam', 'Brian', 'Clive'];

  $scope.open = function()
    var modalInstance = $uibModal.open(
      templateUrl: 'modal.html',
      scope: $scope,
      controller: 'ModalInstanceController',
      resolve: 
        users: function() 
          return $scope.users;
        
      
    );

    modalInstance.result.then(function(modalUsers) 
      //this replaces the array with the array from the modal
      $scope.users = modalUsers;
    )
  ;

]);


// Modal controller is only used for the modal while it's open
app.controller('ModalInstanceController', ['$scope', 'users', '$uibModalInstance', function($scope, users, $uibModalInstance)
  $scope.modalUsers = angular.copy(users);
  $scope.ok = function() 
    //this will pass your modified array into the modalInstance.result.then call
    $uibModalInstance.close($scope.modalUsers)
  ;

  //make some other methods for modifying $scope.modalUsers
])

在您的模态 html 中，将 ng-repeat 更改为引用 modalUsers：

<p>Existing users:</p>
  <ul>
    <li ng-repeat="user in modalUsers">user</li>
  </ul>

【讨论】：

这正是我想要的！一个小改动，在制作 angular.copy 时，我们需要使用 $scope.users 而不是 users

users 是来自父控制器的 $scope.users； $scope.users 作为别名“users”作为依赖项传递给模态控制器。这就是 resolve 在 $scope.open 函数中所做的。