Is there a way to automatically close Angular UI Bootstrap modal when route changes?

Question

I've got links in templates inside modals. When I click them, the current page changes, but the overlay and modal stay. I could add ng-click="dimiss()" to every link in all templates in modals, but is there a better way? E.g. to close it automatically on successful route change or add just one ng-click per template to handle all links?

Answer 1

If you want all the opened modals to be closed whenever a route is changed successfully, you could do it in one central place by listening to the $routeChangeSuccess event, for example in a run block of your app:

var myApp = angular.module('app', []).run(function($rootScope, $uibModalStack) {   $uibModalStack.dismissAll(); });  

Here you can see that the $uibModalStack service gets injected on which you can call the dismissAll method - this call will close all the currently opened modals.

So, yes, you can handle modals closing centrally, in one place, with one line of code :-)

Answer 2

A better way is to see that whenever a Popup (Modal) is open, on Browser Back button click (or Keyboard Back), we stop the URL change and just close the Popup. This works for a better User Experience in my Project.

The Browser Back button works normally if there is no Modal opened.

use:

$uibModalStack.dismiss(openedModal.key); 

or

$uibModalStack.dismissAll; 

Sample code:

.run(['$rootScope', '$uibModalStack',     function ($rootScope,  $uibModalStack) {                // close the opened modal on location change.         $rootScope.$on('$locationChangeStart', function ($event) {             var openedModal = $uibModalStack.getTop();             if (openedModal) {                 if (!!$event.preventDefault) {                     $event.preventDefault();                 }                 if (!!$event.stopPropagation) {                     $event.stopPropagation();                 }                 $uibModalStack.dismiss(openedModal.key);             }         });     }]);