Reliably determine if angular-ui modal is open or closed (shown or hidden)

Question

I'm looking for a method to reliably determine if the angular-ui modal window is currently open or closed.

The standard Bootstrap JS provides the 'shown' / 'hidden' events for this.

Right now I can only wrap the modal.close() function and set a variable to 'closed'. Furthermore I am removing the modal object an re-instantiate it when opened again. But that does not cover the cases in which the user clicks on the backdrop or presses the ESC-key to close the modal.

Is there a clean way to cover these cases, too?

Answer 1

TLDR: Include module ui.bootstrap.modal in your app, inject factory $modalStack in your controller/service/whatever and then !!$modalStack.getTop() is enough to know whether a modal exists on not.

Detailed Solution: I was facing the same issue and I came up with the following work around :

There is a factory called $modalStack which is defined in ui-bootstrap lib which handles the modals. Same service also has a method called getTop() which returns the top most modal in dom. (And a method dismissAll() to close all the modals). So I wrote a small module with some small functions.

var utilsModule = angular.module('utilsModule', ['ui.bootstrap.modal']);

utilsModule.factory('modalUtils', [
  '$modalStack',
  function ($modalStack) {
    return {
      modalsExist: function () {
        return !!$modalStack.getTop();
      },
      closeAllModals: function () {
        $modalStack.dismissAll();
      }
    };
  }
]);