Bento de Gier Bento de Gier - 2 months ago 46
Javascript Question

How to check if a Bootstrap UI modal is open? - AngularJS

My application can open a modal if there's already one open. If that's the case I want to close that modal and open the new one after that's done.

Service to open modals:

app.service('ModalService', function($uibModal) {
this.open = function(size, template, content, backdrop, controller) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: content,
windowTemplateUrl: template,
controller: controller,
backdrop: backdrop,
size: size,
resolve: {}
});
return modalInstance;
};


Then I open one with:

var m = ModalService.open('lg', '', 'ng-templates/modal.html', true, 'ModalController');


And I can close it with:

m.close();


I can only use m.close() within the same switch/case as I open the modal. If I want to close it in another if statement later in the code m is undefined.

Anyway. Can I check if a modal is open? If I console.log(m) then there's this:

d.$$state.status = 1
d.$$state.value = true


But I cannot access the variable m elsewhere in my app so I cannot check for that.

Answer

Just add an flag or getter to your ModalService.

app.service('ModalService', function($uibModal) {
var open = false;

this.isOpen = function () {
  return open;
};

this.open = function(size, template, content, backdrop, controller) {
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: content,
        windowTemplateUrl: template,
        controller: controller,
        backdrop: backdrop,
        size: size,
        resolve: {}
    });

    //Set open
    open = true;

    //Modal is closed/resolved/dismissed
    modalInstance.result.finally(function () {
      open = false;
    });

    return modalInstance;
};
}

You can then call: ModalService.isOpen() to check if your modal is opened.

Comments