CODEWITHSUNDEEP
angularjsmodal-dialogangular-ui-bootstrap
Geraint Anderson
Geraint Anderson

Reputation: 3393

Don’t save scope changes in angular modal

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

Upvotes: 1

Views: 1700

Answers (1)

Phransys
Phransys

Reputation: 146

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>

Upvotes: 1

Related Questions