javascript - 如何在 Angular ui 路由器上转换到另一个模式后关闭模式

Question

我正在使用angular ui router打开模态框。

我有两种带有模态的状态:

1. 'modal.first'
2. 'modal.second'

我想要的是通过单击按钮关闭第一个模式并将状态更改为 'modal.second'。

问题是我只能关闭模态或更改状态(但第一个模态仍然打开)。

此处说明定义:

$stateProvider
    .state('modal.first', {
        url: '/first',
        onEnter: function ($state, $modal) {
            $modal.open({
                templateUrl: 'some_url',
                controller: 'FirstCtrl',
                resolve: {
                    //...
                }
                            }
            }).result.finally(function () {
                $state.go('^');
            });
        }
    })

第二个模态定义完全相同(状态名称 modal.second 和 url /second)。

我正在尝试像这样关闭模式(并更改状态):

(FirstController)

$scope.goSecond = function () {
    $state.go('modal.second', $stateParams);
    $modalInstance.close();
};

但这没有用。我只能选择一个 - 或 $state.go(...) 或 $modalInstance.close()。

我想也许我应该更多地关注 .finally() block 。但还是没有什么想法。谢谢。

链接到模态的官方常见问题解答:click

更新 我不能在没有任何语句的情况下在finally中更改状态，因为我只需要通过单击按钮来更改状态(并制作.go('^') 在任何其他情况下)。

Answer 1

您可以定义服务，该服务保存 modalInstance 并在再次调用 open 时关闭它。

angular.module('someModule')
  .service("singleModal", function($modal) {
    this.modalInstance = null;
    this.open = function(options) {
      if (this.modalInstance) {
        this.modalInstance.close();
      }

      this.modalInstance = $modal.open(options);
      return this.modalInstance;
    };
  })

您可以看到简单的服务示例(没有 ui bootstrap)here