angularjs - Angular UI Bootstrap 模块未关闭后退按钮

Question

我正在使用 UI Boostrap 扩展中的模块 ( http://angular-ui.github.io/bootstrap )。该模块实际上充当加载对话框，并在一组 Web 服务数据返回到我的 Angular 代码时自动关闭。当该页面上的数据自动加载时，对话框会立即出现。

当我第一次访问相关页面或只是刷新它时，所有这些都非常有效。当我进入更深的页面，然后尝试通过浏览器的后退按钮导航回原始页面(带有对话框)时，就会出现问题。尽管返回了所有数据并且已调用了模块的miss()，但该对话框永远不会消失。

我已经将其追溯到打开对话框的 promise 似乎是在解除调用之后发生的，但同样，仅当通过后退按钮加载页面时才发生。解除调用永远不会关闭任何内容，因为它尚未添加(我已在调试器中确认了这一点)。

我的问题是我该如何处理这个问题？有没有一种可靠的方法可以通过 Angular 捕获页面加载的完成情况并仔细检查对话框是否已关闭？通过 UI Bootstrap 的 api 有更好的方法吗？

我知道这是一个相当不寻常的案例，但对此的任何想法都会很棒。

谢谢!

Answer 1

@HankScorpio 的解决方案很好，但我认为现在可能有一个简化的选项。

如果您注册了注入(inject)了 $uibModalStack 的 $locationChangeStart 或 $routeChangeStart 监听器，则不再需要存储当前模态并调用$uibModalStack.dismissAll()。 $locationChangeStart 具有同时适用于 ngRoute 和 uiRoute 的优点。

即如果仅针对一页，那么在您的 Controller 中您将拥有:

angular.module('app')
    .controller('ctrl', ['$scope', '$uibModalStack', ctrl]);

function ctrl($scope, $uibModalStack) {
    $scope.$on('$locationChangeStart', handleLocationChange);

    function handleLocationChange() {
        $uibModalStack.dismissAll();
    }
}

如果您想对所有页面执行此操作，请在始终加载的工厂或只是 app.run 代码段中定义它:

angular.module('app')
    .run(['$rootScope', '$uibModalStack', setupUibModal]);

setupUibModal($rootScope, $uibModalStack) {
    $rootScope.$on('$locationChangeStart', handleLocationChange);

    function handleLocationChange() {
        $uibModalStack.dismissAll();
    }
}