如何在 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() 块。但是还是没有想法。谢谢。

Link 到模态框的官方常见问题解答：click

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

Answer 1

您可以定义服务，它保存 modalInstance 并在再次打开时关闭它。

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