Question

我正试图将使用带有md-tabs的angular的内置路由器转移到ui-router，并发现一个很好的pluncker，它演示了如何轻松配置它。

现在，如果用户试图远离脏页面，我想提出一个允许取消移动的对话框。所以我将这段代码添加到app的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成为主动选择的标签。

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

This page描述了与深标签类似的行为，并提出了一种解决方法，但我无法看到如何将其应用于我的代码示例（顺便提一下，这也证明了深度标签时的相同问题：直接进入状态选项卡/ tab2显示tab2内容，但tab1是活动选项卡。

有解决方法吗？

Answer 1

我确实遇到了同样的问题。似乎使用＆＃39; ng-click＆＃39;指令与＆＃39; $ state.go＆＃39;而不是＆＃39; ui-sref＆＃39;。然后，您需要停止点击事件传播并使用＆md-active＆＃39;来管理活动状态。指令。

然后你的标记看起来像：

<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

使用ui-router和md-tabs

1 个答案: