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?!?

If you are using binded data ($scope.objname) as ng-models on your inputs, these bindings are automatically changed upon value change. As far as i can see the room object is passed through your function callers which possibly uses the scope object. To prevent this you could create a seperate scope variable (to handle the change on manual action). — daan.desmedt
– daan.desmedt, Commented Feb 7, 2017 at 12:27
It's the same thing, instead of $scope your bindings object is just named vm. This does not change the digest cycle and binding methodology. — daan.desmedt
– daan.desmedt, Commented Feb 7, 2017 at 12:30
Can you please provide a solution? I don't understand what you mean... Thanks — Ayeye Brazo
– Ayeye Brazo, Commented Feb 7, 2017 at 12:31
Please provide a working sample through JSFiddle/... so we can help you out. It's impossible to help your specific problem by showing a solution. — daan.desmedt
– daan.desmedt, Commented Feb 7, 2017 at 12:32

daan.desmedt · Accepted Answer · 2017-02-07 12:42:09Z

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.

edited Feb 7, 2017 at 12:42

answered Feb 7, 2017 at 12:36

daan.desmedt

3,8201 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayeye Brazo Over a year ago

Awesome, it helped me to understand it: angular.copy made the trick! Thanks for your help!

daan.desmedt Over a year ago

Great it helped you out! :)

Collectives™ on Stack Overflow

Angular Bootstrap Modal binding issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related