非常简单：

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();

我只能在打开模态的同一个开关/盒子中使用m.close（）。如果我想在后面的另一个if语句中关闭它，那么代码m是未定义的。

反正。我可以检查模态是否打开？如果我是console.log（m），那就是：

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

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

Answer 1

只需在ModalService添加一个标记或getter。

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始终使用类名为modal的div，因此您只需检查是否存在具有该类名的任何元素：

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

Answer 3

由于$ uibModal服务未提供该服务，所以最简洁的方法是检查主体上的“模态开放”类：

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

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

3 个答案:

非常简单：