Question

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

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

另一个问题是，当我尝试修改数组时，它会在模态之外更新。我正在使用$scope.users.push( 'Dave' );。官方演示似乎是以同样的方式进行，所以当我在$ uibModal上调用open方法时，它是否可以通过我传递范围的方式？

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

Answer 1

我在你的plunker中修改了你的js代码，它应该让你朝着正确的方向前进。它修复了注入器错误，并且不会更新$ scope.users，除非您单击“关闭”。按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>

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

1 个答案: