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

Question

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

当我第一次点击有问题的页面或者只是刷新它时,这一切都很有效.当我进入更深的页面,然后尝试通过浏览器的后退按钮导航回原始页面(使用对话框)时,会出现问题.尽管返回了所有数据并且已经进行了模块的dismiss()调用,但对话框永远不会消失.

我已经追溯到承诺打开对话框似乎在解雇呼叫后发生,但是,再次,只有当页面通过后退按钮加载时.解雇调用永远不会关闭任何东西,因为它尚未添加(我已在调试器中确认了这一点).

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

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

谢谢!

Answer 1

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

没有必要存储当前的模式了,如果你注册无论是$locationChangeStart或$routeChangeStart听者$uibModalStack注入和调用$uibModalStack.dismissAll().$locationChangeStart有利于为ngRoute和uiRoute工作.

即如果仅针对一个页面,那么在您的控制器中,您将拥有:

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

Answer 2

使用ui-router进行状态更改时,这是一个简单的解决方案

关闭后退按钮上的模式弹出窗口,单击angularjs

App.run(['$rootScope', '$modalStack', function ($rootScope, $modalStack) {
   $rootScope.$on('$stateChangeStart', function (event) {
        var top = $modalStack.getTop();
        if (top) {
            $modalStack.dismiss(top.key);
        }
    })
}]);

希望这将为那些打破头脑的人节省大量时间

Answer 3

我遇到了同样的问题。这是我修复它的方法。

1) 创建一项服务来抽象模态的打开和关闭并跟踪哪个模态是打开的（步骤 2 所必需的）。不要$modal.open()直接调用，而是调用ModalService.open(). 来吧，你可以看我写的：

(function () {
    'use strict';

    var theModule = angular.module('services.modalService', ['ui.bootstrap']);

    theModule.factory('ModalService', function ($modal) {
        var service = {};
        var currentModal;
        var clearModal = function () {
            currentModal = undefined;
        };

        service.getCurrentModal = function () {
            return currentModal;
        };

        service.open = function (options) {
            currentModal = $modal.open(options);
            currentModal.result['finally'](clearModal);
            return currentModal;
        };

        return service;
    });
}());

2）在控制器中，添加一个事件监听器$routeChangeStart，每当有人点击后退按钮时就会触发该事件。

$scope.$on('$routeChangeStart', function(){
  var currentModal = ModalService.getCurrentModal();
  if(angular.isDefined(currentModal)){
    currentModal.dismiss('cancel');
  }
});

3) 当用户回击时，您的模式现在应该关闭。

4）享受。