Angular ui 路由器转换回之前的状态

Question

我遇到一个问题，在某种情况下状态转换会发生两次。我有一个包含多个 SPA 的应用程序。我使用 MVC 路由来服务每个 SPA，并在每个 SPA 中使用 Angular ui 路由器来处理路由。

下图显示了下拉列表，其中下拉列表中的每个项目都是指向不同 SPA 的链接

下图显示了单击 SPA 链接时显示的选项卡。

我遇到的问题特定于以下步骤。

1. 加载 SPA。这将带您进入第一个选项卡。
2. 单击任何其他选项卡，您将进入该选项卡特定的视图。
3. 从下拉菜单中单击指向同一 SPA 的链接。这将带您返回第一个选项卡。
4. 尝试单击任何其他选项卡。这就是问题发生的地方。ui-router 将转换到我们刚刚单击的选项卡所代表的状态，但是，它会立即带我回到第一个选项卡。

以下是相关代码片段。

路线：

angular.module('settings').config(routeConfig);

routeConfig.$inject = ["$stateProvider", "$urlRouterProvider"];
function routeConfig($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.when('', 'Tab1');

    $stateProvider.state('Tab1',
    {
        url: '/Tab1',
        templateUrl: '/link/To/template.html',
        controller: 'tab1controller as ctrl'
    });

    $stateProvider.state('Tab2',
    {
        url: '/Tab2',
        templateUrl: '/link/To/template.html',
        controller: 'tab2controller as ctrl'
    });
    $stateProvider.state('Tab3',
    {
        url: '/Tab3',
        templateUrl: '/link/To/template.html',
        controller: 'tab3controller as ctrl'
    });

标签 HTML：

<li role="presentation"><a role="tab" ui-sref="Tab1" ui-sref-active="tab-title-active">Tab 1</a></li>
<li role="presentation"><a role="tab" ui-sref="Tab2" ui-sref-active="tab-title-active">Tab 2</a></li>
<li role="presentation"><a role="tab" ui-sref="Tab3" ui-sref-active="tab-title-active">Tab 3</a></li>

我尝试监听该$stateChangeStart事件，并注意到在第 4 步中，它尝试首先转到Tab3，然后出于某种未知原因返回到Tab1。此外，正如您在第二张图片中看到的，两个选项卡突出显示，这意味着 ui-sref-active 已将两个选项卡标记为活动状态。

我尝试通过手动拦截事件$stateChangeStart然后进行转换来更改状态的更改方式$state.go，但$state.transitionTo没有成功。