不要在 angular 模式中保存范围更改

Question

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

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

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

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

Answer 1

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

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 模式中保存范围更改

Don’t save scope changes in angular modal

modal-dialog

angularjs

angular-ui-bootstrap