Question

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

这是tabset的样子：

<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>

我有一个吸烟者：

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

要查看此问题，请选择“信息中心”以外的标签，然后重新加载“实时视图”框架。

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

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

Answer 2

我有完全相同的事情。在搜索了一会儿之后，我决定了“价值”ui-bootstrap提供的标签不值得努力。我简单的手动实现：

    <ul class="nav nav-tabs">
        <li ng-class="{active:$state.current.name == 'properties.edit.basic'}"><a ui-sref="properties.edit.basic">Basic</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.marketing'}"><a ui-sref="properties.edit.marketing">Marketing</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.rooms'}"><a ui-sref="properties.edit.rooms">Rooms</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.images'}"><a ui-sref="properties.edit.images">Images</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.rates'}"><a ui-sref="properties.edit.rates">Rates</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.availability'}"><a ui-sref="properties.edit.availability">Availability</a></li>
    </ul>
    <ui-view></ui-view>

使用AngularJS，UI Bootstrap和UI路由器时，活动选项卡默认为麻烦

2 个答案: