Angularjs 如何在ui.router中使用角度ui.bootstrap选项卡？

下面是我使用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选项卡集成的方法

更新：这里有两个实现，它们工作得更好，但仍然不太正确。第一个使用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的sticky tabs示例中的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状态保持粘性，因为这样它就会陷入无数据显示模式。

最简单的方法是忽略所有奇特的ui引导指令，只使用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>

状态1
{{type}

---

这将提供选项卡的外观，同时保持正确的活动状态。使用<代码> <代码>指令的麻烦在于，不能从UI路由器<代码> >状态> /代码>中对活动状态进行初始化，因此在页面加载时会得到多个突出显示的标签。

您可以考虑查看这个项目，该项目声明为“

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

---

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

只是在我的一个项目中做的。这假设您的路由与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>

---

这些“粘性状态”示例不使用ui引导，但展示了如何实现您在ui路由器中描述的选项卡。将引导css样式添加到“粘性状态”示例应该很容易。谢谢，Chris。实际上，我发现很难找到您在示例中使用的标记。我最后在源代码区域查看了top.html。我现在尝试了两种新方法。第一个使用ui.bootstrap选项卡：Oops，很快就发送了该注释，并且没有时间更正它。再一次：谢谢，基督。我一直在看粘性标签的例子。请看我上面的更新。我怀疑你的ui网格问题与在选项卡中无关。您能否显示在ui网格中填充数据的逻辑？您使用的是解析吗？@ChrisT，我使用的是一个类似$resource的自定义服务：它立即返回一个数组，然后异步填充。我正计划将代码更改为使用承诺的代码，我希望这能解决问题。刚刚测试过，这正是我所需要的。指向选项卡的状态指针，在选择选项卡时自动刷新控制器。非常简单的使用和傻瓜证明，哈哈哈。谢谢分享，对我来说也是完美的。你可以用这个（）解决默认视图问题。与此解决方案结合使用ui sref active是一种简单的方法。这对我有用。谢谢。你有plunker的演示吗？谢谢，我放弃了ui引导，因为两个标签都被选中了。这很有效。