Don’t save scope changes in angular modal

Question

I’m using the Angular UI Bootstrap modal to update an array on the scope. I don’t want the changes saved unless I click the close button. If I click the dismiss button I don’t want to update the array. (this is really to try out the modal functionality)

I’m getting a few problems though. When I include $modalInstance in the controller I’m getting the following error: Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModalInstanceController This seems similar to AngularJS inject issue with Angular Bootstrap modal but I haven’t got an ng-controller in my template.

The other problem is that when I try and modify the array it’s updated outside of the modal. I’m using $scope.users.push( 'Dave' );. The official demo seems to be doing it in the same way, so could it be to do with the way I’m passing the scope when I call the open method on $uibModal?

Here’s the Plunk: http://plnkr.co/edit/FuXjSwtljQtFYOtFRV18?p=preview

Are you injecting $uibModalInstance into your modal controller? That may be the error. — user2263572, Mar 01 '16 at 15:08
Work with copy of data and merge changes to original in result promise callback — charlietfl, Mar 01 '16 at 15:15
@user2263572 no I was injecting $modalInstance. The close/dismiss methods are working now thakyou — Geraint Anderson, Mar 01 '16 at 15:40

score 1 · Accepted Answer · answered Mar 01 '16 at 15:42

I modified your js code in your plunker that should put you in the right direction. It fixes the injector error and doesn't update $scope.users unless you click 'Close'. Closing the modal by pressing Esc should not call the 'ok' method.

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
}])

In your modal html, change the ng-repeat to reference modalUsers:

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

That's exactly what I was looking for! One small change, when making an angular.copy we need to use $scope.users rather than users — Geraint Anderson, Mar 01 '16 at 15:58
users is $scope.users from the parent controller; $scope.users is passed as a dependency to the modal controller as alias "users". That's what resolve does in the $scope.open function. — FrancisA, Mar 01 '16 at 16:37

Don’t save scope changes in angular modal

1 Answers1