feat(modal): prevent location change if modal is open

src/modal/docs/readme.md

@@ -11,6 +11,7 @@ The `$modal` service has only one method: `open(options)` where available option
 * `backdrop` - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), `'static'` - backdrop is present but modal window is not closed when clicking outside of the modal window.
 * `keyboard` - indicates whether the dialog should be closable by hitting the ESC key, defaults to true
 * `windowClass` - additional CSS class(es) to be added to a modal window template
+* `closeOnNavigation` - If true, modal will be closed on page navigation, defaults to true
 
 The `open` method returns a modal instance, an object with the following properties:
 

src/modal/modal.js

@@ -158,13 +158,38 @@ angular.module('ui.bootstrap.modal', [])
         }
       });
 
+      $rootScope.$on('$locationChangeStart', function(evt) {
+        /* Close modals whose closeOnNavigation is true */
+        var opened = openedWindows.keys();
+        if(opened.length === 0) { return; }
+        var tbClosed = [];
+
+        for (var i = 0; i < opened.length; i++) {
+          var modal = openedWindows.get(opened[i]);
+          if (modal.value.closeOnNavigation) {
+            tbClosed.push(modal.key);
+          }
+        }
+
+        if(tbClosed.length > 0) {
+          /* Call apply function for once, not for each close operation. */
+          $rootScope.$apply(function () {
+            for (var i = 0; i < tbClosed.length; i++) {
+              $modalStack.dismiss(tbClosed[i]);
+            }
+          });   
+        }
+
+      });
+
       $modalStack.open = function (modalInstance, modal) {
 
         openedWindows.add(modalInstance, {
           deferred: modal.deferred,
           modalScope: modal.scope,
           backdrop: modal.backdrop,
-          keyboard: modal.keyboard
+          keyboard: modal.keyboard,
+          closeOnNavigation: modal.closeOnNavigation
         });
 
         if (backdropIndex() >= 0 && !backdropDomEl) {
@@ -212,7 +237,8 @@ angular.module('ui.bootstrap.modal', [])
     var $modalProvider = {
       options: {
         backdrop: true, //can be also false or 'static'
-        keyboard: true
+        keyboard: true,
+        closeOnNavigation: true
       },
       $get: ['$injector', '$rootScope', '$q', '$http', '$templateCache', '$controller', '$modalStack',
         function ($injector, $rootScope, $q, $http, $templateCache, $controller, $modalStack) {
@@ -292,7 +318,8 @@ angular.module('ui.bootstrap.modal', [])
                 content: tplAndVars[0],
                 backdrop: modalOptions.backdrop,
                 keyboard: modalOptions.keyboard,
-                windowClass: modalOptions.windowClass
+                windowClass: modalOptions.windowClass,
+                closeOnNavigation: modalOptions.closeOnNavigation
               });
 
             }, function resolveError(reason) {

src/modal/test/modal.spec.js

@@ -348,6 +348,70 @@ describe('$modal', function () {
       });
     });
 
+    describe('navigation', function () {
+
+      it('should close modals if closeOnNavigation option is set to true', function () {
+        open({
+          template: '<div>Should close on navigate</div>',
+          closeOnNavigation: true
+        });
+
+        expect($document).toHaveModalsOpen(1);
+
+        $rootScope.$broadcast("$locationChangeStart");
+        $rootScope.$digest();
+
+        expect($document).toHaveModalsOpen(0);
+      });
+
+      it('should close modals by default', function () {
+        open({
+          template: '<div>Should close on navigate</div>'
+        });
+
+        expect($document).toHaveModalsOpen(1);
+
+        $rootScope.$broadcast("$locationChangeStart");
+        $rootScope.$digest();
+
+        expect($document).toHaveModalsOpen(0);
+      });
+
+      it('should not close modals if closeOnNavigation option is set to false', function () {
+        open({
+          template: '<div>Should not close on navigate</div>',
+          closeOnNavigation: false
+        });
+
+        expect($document).toHaveModalsOpen(1);
+
+        $rootScope.$broadcast("$locationChangeStart");
+        $rootScope.$digest();
+
+        expect($document).toHaveModalsOpen(1);
+      });
+
+      it('should work with multiple modals', function () {
+        open({
+          template: '<div>Should close 1</div>',
+          closeOnNavigation: true
+        });
+        open({
+          template: '<div>Should close 2</div>'
+        });
+        open({
+          template: '<div>Should not close</div>',
+          closeOnNavigation: false
+        });
+        expect($document).toHaveModalsOpen(3);
+
+        $rootScope.$broadcast("$locationChangeStart");
+        $rootScope.$digest();
+
+        expect($document).toHaveModalsOpen(1);
+      });
+    });
+
     describe('backdrop', function () {
 
       it('should not have any backdrop element if backdrop set to false', function () {