angular ui modal after close event

Question

Is there a way I can call a function after a modal window got called (no matter if it happened with a button or by clicking on the backdrop)

var dialog, options;  options = {   windowClass: "lightBox"   templateUrl: "url to the template",   controller: "some random controller",   scope: $scope });  $("body").css({   'overflow': 'hidden' });  dialog = $modal.open(options);  dialog.result.then(function() {   $("body").css({     'overflow': 'auto'   }); }); 

I want that everytime the modal windows closes the function in the result.then promise get executed. Now it just executes when i close the modal manually my $modalInstance.close(). But if i click on the backdrop this method doesn't get called

any idea how i can do this?

Answer 1

I will assume that you are using the Modal dialogs from angular-ui. But before going into the details a bit of documentation around promises in AngularJS is needed. You need to know that every then function can accept 3 parameters as such :

then(successCallback, errorCallback, notifyCallback)  

• successCallback is executed when the promise is resolved.
• errorCallback is executed when the promise is rejected.
• notifyCallback is executed when notified.

In the case of angular-ui's modal, clicking on the backdrop will result in a rejected promise. With this in mind, your code could be changed to :

dialog.result.then(function () {   alert('Modal success at:' + new Date()); }, function () {   alert('Modal dismissed at: ' + new Date()); }); 

You can see a working plunker here

Answer 2

Angular 1.2 supports promises with a finally(callback):

dialog.result.finally(function() {     alert('clean up resources'); }); 

Check out the working plunker here.