Question

这是我使用ui.router初步实现的ui.bootstrap标签：

<tabset>
  <tab heading="Tab1" select="$state.go('home.tab1')">
    <div ui-view="forTab1"></div>
  </tab>
  <tab heading="Tab2" select="$state.go('home.tab2')">
    <div ui-view="forTab2"></div>
  </tab>
</tabset>

非常简单，它主要起作用，但它有几个问题。

首先，如果我在浏览器中输入网址，它就不起作用，例如＆＃34; ... /家庭/ TAB1＆＃34 ;.我认为的问题是，虽然ui.router可能会路由到正确的视图，但它并不知道选择该视图的标签。

其次，如果我尝试将页面保留在不同页面上的状态，则会触发选项卡逻辑中的明显错误。当标签集被销毁时，它会逐个销毁标签。当它破坏当前选定的选项卡时，它似乎运行的逻辑与仅在该选项卡被销毁时运行的逻辑相同，而不是整个选项卡集。这导致它选择其他一个尚未销毁的选项卡，这使得ui.router进入该选项卡的状态，这阻止我离开页面。（修复程序可能应该是在销毁过程中销毁标签集不应该选择任何标签。）

第三，某些选项卡视图可能很复杂，在构建期间会有许多服务器命中。每次从一个标签切换到另一个标签时，我都不想破坏和重新创建它们。我更倾向于在首次选择该选项卡时创建选项卡视图，然后一直持续到我离开页面。选择之前查看过的选项卡应该只是再次显示它，而不是重新创建它。

所以，看起来我需要更复杂和更复杂的东西，但是什么呢？提前感谢任何建议。

更新：ui.router常见问题解答对如何实施标签有疑问。它指的是＆＃34;额外＆＃34;包装看起来很有前景。希望有一种方法可以与ui.bootstrap标签集成。 http://christopherthielen.github.io/ui-router-extras/#/sticky

更新：这里有两个实现更好但仍然不太正确的实现。第一个使用ui.bootstrap标签：

<tabset>
  <tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"></tab>
  <tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"></tab>
</tabset>
<div ui-view="home.products" ng-show="$state.includes('home.products')"></div>
<div ui-view="home.users" ng-show="$state.includes('home.users')"></div>

第二个是基于来自Chris Thielen的关键标签示例的top.html：

<div class="navbar navbar-default navbar-static-top" role="navigation">
  <ul class="nav navbar-nav">
    <li ng-class="{active: $state.includes('home.products')}" ><a ui-sref="home.products">Products</a></li>
    <li ng-class="{active: $state.includes('home.users')}" ><a ui-sref="home.users">Users</a></li>
  </ul>
</div>
<div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"></div>
<div class="tabcontent well-lg" ui-view="home.users"    ng-show="$state.includes('home.users')"    class="col-sm-6"></div>

这两个都避免了我上面的两个问题 - 通过URL工作转到标签页面，我可以离开页面而不会触发标签销毁bug（大概是因为我没有使用＆＃34; select =＆＃34）。

但是，仍然存在问题，两种版本都会出现这种情况。 home.users模板有一个ui-grid，如果我首先转到选中该选项卡的页面，则网格为空。我可以看到客户端从服务器请求网格数据，但它没有显示它。如果我转到另一个选项卡并返回，则显示数据（重新获取后）。更糟糕的是，这意味着我无法使home.users状态变得粘滞，因为它会陷入无数据显示模式。

Answer 1

最简单的方法是忽略所有花哨的ui-bootstrap指令，只使用CSS。然后你可以得到一些非常简单的东西：

<ul class="nav nav-tabs">
    <li ui-sref=".state1" ui-sref-active="active"><a>State 1</a></li>
    <li ng-repeat="type in viewModel.types"
        ui-sref=".typeState({type:type})"
        ui-sref-active="active"><a>{{type}}</a></li>
</ul>

这将在保持正确的活动状态的同时提供选项卡的外观。使用<tab-header>指令的麻烦在于，您无法从ui-router $state干净地初始化活动状态，因此您可以在页面加载时突出显示多个选项卡。

Answer 2

您可以考虑查看此项目ui router plus ui bootstrap tabs，该项目声明为

使用Angular.js + Bootstrap 3 + UI路由器支持路由支持的白痴防范选项卡窗格

我还没有尝试过，但肯定看起来很有希望。

Answer 3

在我的一个项目中做到了这一点。这假设您的路由使用ui.router连接。希望它有所帮助。

<File FileName.java is missing>

如何在ui.router中使用Angular ui.bootstrap选项卡？

3 个答案: