如何检查 Bootstrap UI 模式是否打开？ - AngularJS

Question

我的应用程序可以打开一个模式，如果已经打开的话。如果是这种情况，我想关闭该模式并在完成后打开新模式。

打开模式的服务：

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;
};

然后我打开一个：

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

我可以用以下方式关闭它：

m.close();

我只能在打开模态窗口的同一个 switch/case 中使用 m.close()。如果我想在稍后的代码中的另一个 if 语句中关闭它，则 m 未定义。

无论如何。我可以检查模式是否打开吗？如果我 console.log(m) 那么有这个：

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

但是我无法在我的应用程序的其他地方访问变量 m，所以我无法检查它。

Answer 1

只需添加一个标志或 getter 到您的 ModalService。

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

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

this.close = function (result) {
  modalInstance.close(result);
};

this.dismiss = function (reason) {
  modalInstance.dismiss(reason);
};

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

    //Set open
    open = true;

    //Set modalInstance
    modalInstance = modal;

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

    return modal;
};
}

然后您可以调用：ModalService.isOpen()检查您的模式是否打开。

Answer 2

很简单：

因为 $uibModal 总是使用 div 和 class 名称 modal 你可以检查是否存在任何具有 class 名称的元素：

//If no modal is open
if (document.getElementsByClassName("modal").length === 0) {
  //do something...
} else {
  // do something when a modal is open
}

Answer 3

由于 $uibModal 服务不提供它，最简单的方法是检查主体上的 "modal-open" class:

document.body.className.indexOf('modal-open') !== -1

如何检查 Bootstrap UI 模式是否打开？ - AngularJS

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

javascript

angularjs

angular-ui

angular-ui-bootstrap

很简单：