I'm trying to get modal dialogue from angular bootstrap UI to work. Everything works fine except few fields that are also present on the caller screen. These fields also get updated when I update their values on the modal. For example, if I'm displaying the name field on the caller and click on it to edit it, the edited text appears on the caller screen as well. Although I've created separate controller for the modal, it somehow still shares the same scope. I've tried "controller as" syntax for the caller controller but I still have the same problem. I can't do controller as syntax for modal as I don't know if there is a way to do it. If any of you know how to fix this, it will be a great help! Here is the
plunkerhttp://plnkr.co/edit/glcw3bjPVPDesq05lg47?p=preview
Add a comment
|
1 Answer
It happens because you are passing the person object directly to modal controller. Instead create new person object by copying the original one as:
resolve: {
person: function() {
// return selectedPerson;
return angular.copy(selectedPerson);
}
}
then return this copy to caller when "ok" clicked
$scope.ok = function() {
$modalInstance.close($scope.person);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
and then the caller can get it
modalInstance.result.then(function(personModified) {
$log.info('personModified = '+ personModified.name + ' Finished at: ' + new Date());
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
So if the "cancel" button is clicked you just discard the copied person.
2 Comments
Saurabh Gupta
This is great. Never had this deep understanding of how modal works. Thanks you so much for being so comprehensive in your explanation.
Saurabh Gupta
I'm now stuck at the next step. I don't know if you could help me with that. stackoverflow.com/questions/28786177/…