angularjs - 如何将 Angular ui.bootstrap 选项卡与 ui.router 一起使用？

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>

非常简单，而且大部分都能工作，但有几个问题。

首先，如果我在浏览器中输入 URL，则不起作用，例如“.../home/tab1”。我认为的问题是，虽然 ui.router 可能路由到正确的 View ，但它不知道选择该 View 的选项卡。

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

第三，某些选项卡 View 可能很复杂，在构建过程中会遇到许多服务器点击。我不想每次从一个选项卡切换到另一个选项卡时都销毁并重新创建它们。我宁愿在第一次选择该选项卡时创建一个选项卡 View ，然后一直保留到我离开页面。选择以前查看过的选项卡应该只是使其再次可见，而不是重新创建它。

所以，看起来我需要一些更复杂和精密的东西，但是什么呢？预先感谢您的任何建议。

更新:ui.router 常见问题解答有一个关于如何实现选项卡的问题。它指出了一个看起来很有前途的“额外”套餐。希望有一种方法可以与 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 进入选项卡是可行的，而且我可以离开页面而不会触发选项卡破坏错误(大概是因为我没有使用“select=”)。

但是，仍然存在问题，并且两个版本都会发生这种情况。 home.users 模板有一个 ui 网格，如果我首先进入选择该选项卡的页面，则网格是空的。我可以看到客户端从服务器请求网格数据，但它没有显示。如果我转到另一个选项卡并返回，它会显示数据(重新获取数据后)。更糟糕的是，这意味着我无法使 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 干净地初始化事件状态，因此您可以在页面加载时突出显示多个选项卡。