如何在解决时关闭/解除模态？

Question

我正在寻找一种方法来取消Angular-UI Bootstrap模式的解析并阻止它打开。 dismissAll 方法无效，因为仅在解析完成后才将模态实例添加到模式堆栈。

我有一个网站，其中模式在路线更改时打开和关闭。如果在路线更改期间调用 dismissAll 以关闭任何旧模态，则不会影响仍在解析的模态。所以你来到新的路线，但旧的模态仍然在它的决心完成后弹出。

Answer 1

目前看来，没有办法取消ES6和$ q承诺。您可以参考this question了解更多信息。

tl; dr Bluebird allows promise cancellation

如果你真的需要它，你可以add bluebird to angular。

如果你仍然想使用普通的'$ q，这就是我要做的事情

1. 将模态传递给当前状态（如果使用ui-router）或路由（如果使用angular router）。
2. 当您需要渲染模态模板时，将当前状态与提供的状态进行比较。
3. 如果不相等则丢弃模态

modalInstance对象公开了一个rendered承诺，该承诺将在模态完成渲染时运行，您可以将$uibModalStack.dismissAll();放入其中。

示例：

modalInstance.rendered.then(function (currentState) {
    if (currentState !== $state.current) {
        $uibModalStack.dismissAll();
    }
}, function () {
    $log.info('Modal dismissed at: ' + new Date());
});

当然，您可以在渲染模态后推迟加载并完全避免这种混乱。

Answer 2

这是迄今为止确保模态永远不会消失的最简单方法，它适用于具有简单模态使用的应用程序。我已经看到这种方法在多个地方可靠地工作了多年。本质上，您在路由器中注册了状态更改侦听器，无论何时发生状态更改，您都必须确保关闭所有打开的模式，无论这些模式是什么。再说一次，这看起来似乎很苛刻，但是在某些应用程序中，它就像一个咒语，总比没有好。

一个简单的示例，使用 UI路由器的 @code服务和 Angular UI Bootstrap的 $transition，它可以很简单：

$uibModalStack

当然，如果需要，您只能对符合特定条件的转换执行此操作。

来源：https://www.codelord.net/2017/12/11/reliably-managing-modals-in-angularjs/