catching Angular Bootstrap UI $uibModal closed event after the modal was closed

Question

I'm opening a modal window using $uibModal.open from another controller, and need to be notified when the modal window was closed completely (and not during closing...) so I'll be able to run a function.

The code that opens the modal is as follows:

var modalInstance = $uibModal.open({
  templateUrl: "myModalContent.html",
  controller: "termModalCtrl",
  windowClass: 'app-modal-window',
  resolve: {
    'params': function () { return id }
  }
});

I saw some suggested solutions to use:

modalInstance.result.then(function(result) {
});

The problem is that the function callback is called prior to the actual closing of the modal window (when the modal window is still open) and this is not the behavior I want cause it means that it catches the "closing" event and not the "closed" event of the modal.

Is there a neat and simple way to implement this? I'd be surprised if not since this behavior is very common in any UI frameworks on the planet...

Please help!

Solution 1

Try this.

.open method returns a promise that could be chained with .closed which is one of the many properties of .open method.

I tested it and it shows the alert only after the modal has closed and not while it's 'closing'.

Refer the 'closed' under Return section here

var modalInstance = $uibModal.open({
    templateUrl: "myModalContent.html",
    controller: "termModalCtrl",
    windowClass: 'app-modal-window',
    resolve: {
        'params': function () { return id }
    }
}).closed.then(function(){
  window.alert('Modal closed');
});

here is the plunker http://plnkr.co/edit/yB3k8e3R3ZLQFQ6sfLYW?p=preview

Solution 2

Use modalInstance.result promise second callback to catch the closing event. I'm also getting exception 'Unable to get property 'then' of undefined or null reference' on .closed.then ,

 var modalInstance = $uibModal.open({
    templateUrl: "myModalContent.html",
    controller: "termModalCtrl",
    windowClass: 'app-modal-window',
    resolve: {
        'params': function () { return id }
    }
});

modalInstance.result
   .then(function (selectedItem) {
    //
   }, function () {
    //close callback
    console.info('modal closed');
   });

Comments

[Avner Hoffmann]

I tried your solution, yet it's not working - I'm getting an exception "Unable to get property 'then' of undefined or null reference". it seems like the property 'closed' is somehow undefined for the promise returned by the open method...

[Srijith]

Nope. Remove the modalInstance.result.then... from your code.

[Nitin Jadhav]

For this to work, we have to close popup using $uibModalInstance.close('cancel'); but NOT using dismiss function.