使用 ui-router 和 md-tabs 调用 preventDefault() 后选择了错误的选项卡

Question

我正在尝试从使用 angular 的内置路由器和 md-tabs 转移到 ui-router，并找到了一个不错的 pluncker，它演示了它可以如何轻松地配置为工作。

现在，如果用户试图从脏页面上移开标签，我想提出一个允许取消移动的对话框。所以我将这段代码添加到应用程序的 run() 方法中：

$rootScope.$on('$stateChangeStart',
    function (event, toState, toParams, fromState, fromParams) {

        console.log(' fromState: '+fromState.name +'; toState: '+toState.name);

            if (confirm("Would you like to change state?")){
              console.log('going to: '+toState.name);
            } else {
              console.log('staying at state: '+fromState.name);
              event.preventDefault();
            }

      });

如果我选择 tab2 并取消对话框中的状态更改，则 tab1 文本会根据需要保持显示。但是，tab2 成为主动选择的选项卡。

我发现了一些关于在preventDefault() 之后调用$state.go(fromState.name) 的建议，但这并不能解决问题。

This page 描述了与深度标签类似的行为并提出了一种解决方法，但我无法看到如何将它应用到我的代码示例中（顺便说一下，这也说明了在深度标签上同样的问题：直接声明 tabs/tab2 显示 tab2 内容，但 tab1 再次是活动选项卡。

有解决办法吗？

Answer 1

我确实有同样的问题。使用带有“$state.go”而不是“ui-sref”的“ng-click”指令似乎对我有用。然后你需要停止点击事件传播并使用'md-active'指令管理活动状态。

那么你的标记看起来像：

<md-tabs md-align-tabs="top">

<md-tab md-active="$state.includes('tabs.tab1')">
  <md-tab-label>
    <span ng-click="$event.stopPropagation();$state.go('tabs.tab1')">Tab 1</span>
  </md-tab-label>
</md-tab>

<md-tab md-active="$state.includes('tabs.tab2')">
  <md-tab-label>
    <span ng-click="$event.stopPropagation();$state.go('tabs.tab2')">Tab 2</span>
  </md-tab-label>
</md-tab>

在这里查看：http://plnkr.co/edit/O2y8Rn1SmuquXTjucrgm