可靠地确定 angular-ui 模态是打开还是关闭（显示或隐藏）

Question

我正在寻找一种方法来可靠地确定 angular-ui 模态窗口当前是打开还是关闭。

标准的 Bootstrap JS 为此提供了“显示”/“隐藏”事件。

现在我只能包装 modal.close() 函数并将变量设置为“关闭”。此外，我正在删除模态对象，并在再次打开时重新实例化它。但这并不包括用户点击背景或按 ESC 键关闭模式的情况。

是否也有一种干净的方法来涵盖这些情况？

Answer 1

TLDR： 在您的应用程序中包含模块ui.bootstrap.modal，在您的控制器/服务/任何东西中注入工厂$modalStack，然后!!$modalStack.getTop() 足以知道模态是否存在。

详细解决方案： 我遇到了同样的问题，我想出了以下解决方法：

有一个名为$modalStack 的工厂在处理模态的ui-bootstrap 库中定义。同样的服务还有一个名为getTop() 的方法，它返回dom 中最顶层的模态。 （还有一个方法dismissAll() 来关闭所有模式）。所以我写了一个带有一些小功能的小模块。

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

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