angularjs - 使用 AngularJS、UI Bootstrap 和 UI Router 的事件选项卡默认设置问题

Question

当使用 UI Boostrap 标签集以及使用 ui-router 和 ui-router-extras 创建的嵌套粘性状态时，我遇到了一个问题，即通过 URL 导航到选项卡的状态将选择第一个选项卡和正确的选项卡。它应该只激活状态与 URL 路由匹配的选项卡。

这是标签集的样子:

<div style="position:relative">
      <tabset>
        <tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
        <tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
        <tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
        <tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
      </tabset>
      <div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
          <h2>Dashboard</h2>
          {{test}}
      </div>
      <div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
          <h2>Modules</h2>
      </div>
      <div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
          <h2>Messages</h2>
      </div>
      <div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
          <h2>Settings</h2>
      </div>
    </div>

我这里有一个plunker:

http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview

要查看问题，请选择“仪表板”以外的选项卡，然后重新加载“实时 View ”框架。

另一种方法是在窗口中打开它，切换选项卡，然后重新加载。

Answer 1

我有同样的问题。添加 active="false"以禁用默认行为并使用 ui-sref-active 添加事件类。

<tab ui-sref-active="active" active="false">

编辑

虽然此方法似乎有效，但它会产生错误，因为 false 不可分配。

编辑 2

将 ng-init 与局部作用域变量相结合似乎可以解决问题。

<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">

在您的情况下，为每个选项卡添加一个事件变量可能更简单。看到这个plunker:
http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview