diff --git a/src/modal/modal.js b/src/modal/modal.js index 12ddfa8ee4..a78db01194 100644 --- a/src/modal/modal.js +++ b/src/modal/modal.js @@ -1,4 +1,4 @@ -angular.module('ui.bootstrap.modal', []) +angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition']) /** * A helper, internal data structure that acts as a map but also allows getting / removing @@ -106,8 +106,8 @@ angular.module('ui.bootstrap.modal', []) }; }]) - .factory('$modalStack', ['$document', '$compile', '$rootScope', '$$stackedMap', - function ($document, $compile, $rootScope, $$stackedMap) { + .factory('$modalStack', ['$transition', '$timeout', '$document', '$compile', '$rootScope', '$$stackedMap', + function ($transition, $timeout, $document, $compile, $rootScope, $$stackedMap) { var OPENED_MODAL_CLASS = 'modal-open'; @@ -140,17 +140,36 @@ angular.module('ui.bootstrap.modal', []) openedWindows.remove(modalInstance); //remove window DOM element - modalWindow.modalDomEl.remove(); + removeAfterAnimating(modalWindow.modalDomEl, modalWindow.modalScope); body.toggleClass(OPENED_MODAL_CLASS, openedWindows.length() > 0); //remove backdrop if no longer needed if (backdropDomEl && backdropIndex() == -1) { - backdropDomEl.remove(); + removeAfterAnimating(backdropDomEl, backdropScope); backdropDomEl = undefined; } + } - //destroy scope - modalWindow.modalScope.$destroy(); + function removeAfterAnimating(domEl, scope) { + // Closing animation + $timeout(function () { + scope.animate = false; + }); + + var transitionEndEventName = $transition.transitionEndEventName; + if (transitionEndEventName) { + // transition out + var timeout = $timeout(function () { + domEl.remove(); + }, 500); + + domEl.bind(transitionEndEventName, function () { + $timeout.cancel(timeout); + domEl.remove(); + }); + } else { + domEl.remove(); + } } $document.bind('keydown', function (evt) { diff --git a/src/modal/test/modal.spec.js b/src/modal/test/modal.spec.js index 697eec6861..a75126df33 100644 --- a/src/modal/test/modal.spec.js +++ b/src/modal/test/modal.spec.js @@ -1,4 +1,4 @@ -describe('$modal', function () { +ddescribe('$modal', function () { var $rootScope, $document, $compile, $templateCache, $timeout, $q; var $modal, $modalProvider; @@ -104,6 +104,7 @@ describe('$modal', function () { function dismiss(modal, reason) { modal.dismiss(reason); + $timeout.flush(); $rootScope.$digest(); } @@ -144,6 +145,7 @@ describe('$modal', function () { expect($document).toHaveModalsOpen(1); triggerKeyDown($document, 27); + $timeout.flush(); $rootScope.$digest(); expect($document).toHaveModalsOpen(0); @@ -155,6 +157,7 @@ describe('$modal', function () { expect($document).toHaveModalsOpen(1); $document.find('body > div.modal-backdrop').click(); + $timeout.flush(); $rootScope.$digest(); expect($document).toHaveModalsOpen(0);