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

【问题标题】：How to use Angular ui.bootstrap tabs with ui.router?如何在 ui.router 中使用 Angular ui.bootstrap 选项卡？
【发布时间】：2017-06-30 20:52:31
【问题描述】：

这是我使用 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 可能正在路由到正确的视图，但它不知道选择该视图的选项卡。

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

第三，一些选项卡视图可能很复杂，在构建过程中会出现许多服务器点击。每次从一个选项卡切换到另一个选项卡时，我都不想销毁和重新创建它们。我宁愿在第一次选择该选项卡时创建一个选项卡视图，然后一直持续到我离开页面。选择以前查看过的标签应该只是让它再次可见，而不是重新创建它。

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

更新：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-grid，如果我第一次进入选择了该选项卡的页面，则该网格是空的。我可以看到客户端从服务器请求网格的数据，但它没有显示出来。如果我转到另一个选项卡并返回，那么它会显示数据（重新获取后）。更糟糕的是，这意味着我无法让 home.users 状态保持粘性，因为这样它就会卡在无数据显示模式。

【问题讨论】：

“粘性状态”示例不使用 ui-bootstrap，但展示了如何实现您在 ui-router 中描述的选项卡。将引导 css 样式添加到“粘性状态”示例应该很容易。
谢谢，克里斯。实际上，我发现很难找到您在示例中使用的标记。我最终在源代码区域查看了 top.html。我现在尝试了两种新方法。第一个使用 ui.bootstrap 选项卡：
糟糕，该评论发送得太早了，没有时间更正它。再次：谢谢，@ChrisT。我一直在看粘性标签示例。请看我上面的更新。
我怀疑您的 ui-grid 问题与位于选项卡内无关。你能展示你的逻辑来填充 ui-grid 中的数据吗？你在使用解决方案吗？
@ChrisT，我正在使用一个像 $resource 一样工作的自定义服务：它立即返回一个数组，然后它会异步填充。我正计划将该代码更改为使用 promise 的代码，我希望这能解决问题。

标签： angularjs tabs angular-ui-router angular-ui-bootstrap

【解决方案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 干净地初始化活动状态，因此您会在页面加载时突出显示多个选项卡。

【讨论】：

你可以用这个（toptal.com/angular-js/…）解决默认视图问题。结合使用 ui-sref-active 的这种解决方案是一种简单的方法。它对我有用。谢谢。
你有这方面的 plunker 演示吗？
谢谢，我放弃了 ui-bootstrap，因为我在选择两个选项卡时遇到了问题。这很有效。

【解决方案2】：

您可以考虑看看这个项目，ui router plus ui bootstrap tabs，它声明自己为

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

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

【讨论】：

刚刚测试过，这正是我所需要的。指向选项卡的状态指针和选项卡选择时自动刷新控制器。使用起来真的很简单，防白痴，哈哈哈。
感谢分享，也适合我。

【解决方案3】：

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

<uib-tabset active="active">

    <uib-tab index="0" ui-sref ="tab1" heading="Tab1"></uib-tab>

    <uib-tab index="1" ui-sref="tab2" heading="Tab2"></uib-tab>

</uib-tabset>

【讨论】：