重新加载页面时，AngularJS tabset 不显示正确的状态

Question

我在 AngularJS SPA 中使用 angular-ui-router 以及 bootstrap tabset 指令。

这是我的例子http://plnkr.co/V0Cs6BfnggXshawMv4LX以及重现问题的步骤。

• 在“全屏”模式下启动 plunker，以便轻松重新加载页面。
• 点击“ child 二”选项卡。
• 浏览器中的 URL 正确显示状态为/home/child2
• 重新加载页面。
• 浏览器中的URL仍然显示状态为/home/child2

问题是标签集的 UI 现在显示选中了“Child One”标签，即使状态是“home.child2”。是否有一种自动方法可以让选项卡显示正确的状态？

Answer 1

我在没有选项卡数组和 $stateChangeSuccess 的情况下完成了此操作...还有一种解决方法。

这将控制点击和事件状态:

<tab ui-sref="home.child1" ui-sref-active="active"></tab>

对我来说，当页面刷新或最初从 url 加载时，ui-view 在选项卡元素内部不起作用。它们仅在单击选项卡时起作用。因此，解决方法是在选项卡集下列出 ui View 。

<tabset><tab ui-sref="home.child1" ui-sref-active="active"></tab></tabset>
<div ui-view="home.child1"></div>

现在，只有正确的 ui-view 会在刷新和点击导航时显示。

我不确定这是否特定于我的应用程序；但第一个选项卡始终处于事件状态。作为第一个选项卡的禁用选项卡是解决方法:<tab disabled="true"/>