Angularjs Bootstrap modal closing call when clicking outside/esc

Question

I am using the Angular-ui/bootstrap modal in my project.

Here is my modal:

$scope.toggleModal = function () {     $scope.theModal = $modal.open({         animation: true,         templateUrl: 'pages/templates/modal.html',         size: "sm",         scope: $scope     }); } 

One is able to close the modal by clicking the ESC button or clicking outside the modal area. Is there a way to run a function when this happens? I am not quite sure how to catch the sort of closing.

I know that I can manually dismiss a modal by having a ng-click="closeModal()" like this:

$scope.closeModal = function () {     $scope.theModal.dismiss('cancel'); }; 

Answer 1

Yes you can. It causes a dismiss event and the promise is rejected in that case. Also, note that the $modal.open() method returns an object that has a result property that is a promise.

With the promise you can...

//This will run when modal dismisses itself when clicked outside or //when you explicitly dismiss the modal using .dismiss function. $scope.theModal.result.catch(function(){     //Do stuff with respect to dismissal });  //Runs when modal is closed without being dismissed, i.e when you close it //via $scope.theModal.close(...); $scope.theModal.result.then(function(datapassedinwhileclosing){     //Do stuff with respect to closure }); 

as a shortcut you could write:

 $scope.theModal.result.then(doClosureFn, doDismissFn); 

See ref

The open method returns a modal instance, an object with the following properties:

• close(result) - a method that can be used to close a modal, passing a result
• dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
• result - a promise that is resolved when a modal is closed and rejected when a modal is dismissed
• opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables 'rendered' - a promise that is resolved when a modal is rendered.