如何在解决问题的同时关闭/关闭模式？答案

【问题标题】：How to close/dismiss modal while still resolving?如何在解决问题的同时关闭/关闭模式？
【发布时间】：2017-05-23 22:48:30
【问题描述】：

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

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

【问题讨论】：

标签： angular-ui-bootstrap

【解决方案1】：

就目前的情况而言，没有办法取消 ES6 和 $q 承诺。您可以参考this question了解更多信息。

tl;博士Bluebird allows promise cancellation

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

如果你仍然想使用普通的 $q，我会这样做

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

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

示例：

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

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

【讨论】：

经过更多调查后，我发现无法在解决模式时将其关闭。最早可能的时刻在 opened 承诺中。我添加了特定于应用程序的代码来检查模态是否仍应打开，如果没有则将其关闭。无论如何，谢谢你的回答:)

【解决方案2】：

到目前为止，这是确保模态永远不会停留的最简单方法，它适用于使用简单模态的应用。我已经看到这在几个地方工作了多年并且可靠。本质上，您在路由器中注册一个状态更改侦听器，并且无论何时发生状态更改，您都要确保关闭所有打开的模式，无论它们是什么。同样，这可能看起来很苛刻，但在某些应用程序中，这就像一种魅力，总比没有好。

一个简单的例子，使用 UI Router 的 $transition 服务和 Angular UI Bootstrap 的 $uibModalStack，这可以很简单：

$transitions.onFinish({}, function(transition) {
  $uibModalStack.dismissAll();
});

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

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

【讨论】：