Angular Bootstrap Modal binding issue

Question

I'm working with Angular Bootstrap and actually I'm trying to update correctly my model using a Modal.

Here is the very simple code:

controller:

function open(room) {
  var roomModal = $uibModal.open({
    templateUrl: 'room-modal.html',
    controller: 'RoomModalController',
    controllerAs: 'modal',
    resolve: {
      room: room
    }
  });

  roomModal.result.then(function (response) {
    RoomsService.update({
      roomId: response._id
    }, response).$promise (etc...);
  });
}

Modal Controller:

    var vm = this;

    vm.room = room;

    vm.save = function () {
      $uibModalInstance.close(vm.room);
    };

    vm.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };

Basically I'm resolving the Room to get a few information about it and then if needed I wish to update a few information about the room within the modal.

It is working fine unless I do not want to update some information and I click "close".

What happen is: if I updated a few information and then I click "close" the information has not been updated on the database (OK) but has been updated in the main view... Because Angular bind the Modal information to the main view...

It is quite weird because I'm passing those information to a separate scope (vm) and unless I do not click save I should not expect this behavior...

What I'm doing wrong here?!?

Answer 1

In your RoomModalController deep copy the room object to prevent when updating that the model is also updated.

vm.room = angular.copy(room);

Now this object will take care of the modal binding, and will not interfere when changed to your root scope vm.room object.

To finalize saving this data, you have to save the vm.root modal object to your database, and also update the root scope vm.room object according these changes made in the modal.