如何使用角度ui。引导和ui.router标签吗?

Here's my initial implementation of ui.bootstrap tabs using ui.router:

这是ui的初始实现。使用ui.router引导选项卡:

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

Nicely simple, and it mostly works, but it has several problems.

它非常简单，而且基本上是有效的，但是它有几个问题。

First, it doesn't work if I enter a URL into the browser, e.g. ".../home/tab1". The issue I presume is that while ui.router may be routing to the correct view, it doesn't know to select that view's tab.

首先，如果我在浏览器中输入一个URL，它就不能工作。“……/ home / tab1”。我认为问题在于ui。路由器可能路由到正确的视图，它不知道选择该视图的选项卡。

Second, if I try to leave the page for a state on a different page, it triggers an apparent bug in the tabs logic. As the tab set is being destroyed, it destroys the tabs one by one. When it destroys the currently selected tab, it appears to run the same logic that it would run if only that tab were being destroyed, not the entire tab set. This causes it to select one of the other not-yet-destroyed tabs, which makes ui.router go to that tab's state, which prevents me from leaving the page. (The fix presumably should be that destroying the tab set should not select any tabs during the destruction process.)

其次，如果我尝试在不同的页面上为一个状态保留页面，它会在制表符逻辑中触发一个明显的错误。当标签集被销毁时，它会逐个破坏标签。当它破坏当前选择的选项卡时，它似乎运行的逻辑与它在只销毁该选项卡时运行的逻辑相同，而不是整个选项卡集。路由器进入标签的状态，阻止我离开页面。(修复应该是销毁选项卡集不应该在销毁过程中选择任何选项卡。)

Third, some of the tab views may be complex, with many server hits during their construction. I don't want to destroy and recreate them every time I switch from one tab to another. I'd much rather have a tab view be created when that tab is first selected and then persist until I leave the page. Selecting a previously viewed tab should just make it visible again, not re-create it.

第三，有些选项卡视图可能比较复杂，在构建过程中会有很多服务器点击。我不想每次从一个标签页切换到另一个标签页时都要销毁并重新创建它们。我更希望在第一次选择选项卡时创建一个选项卡视图，然后一直保存到离开页面为止。选择先前查看的选项卡应该使它再次可见，而不是重新创建它。

So, it looks like I need something more complex and sophisticated, but what? Thanks in advance for any suggestions.

所以，看起来我需要更复杂和复杂的东西，但是什么呢?谢谢你的建议。

Update: the ui.router FAQ turns out to have a question on how to implement tabs. It points to an "extras" package that looks promising. Hopefully there's a way to integrate with ui.bootstrap tabs. http://christopherthielen.github.io/ui-router-extras/#/sticky

更新:ui。路由器FAQ中有一个关于如何实现制表符的问题。它指出了一个看起来很有前途的“额外”套餐。希望有一种方法可以与ui集成。引导选项卡。http://christopherthielen.github.io/ui-router-extras/ /粘

Update: here are two implementations that work much better but still aren't quite right. The first one uses ui.bootstrap tabs:

更新:这里有两个更好的实现，但仍然不完全正确。第一个使用ui。引导选项卡:

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

The second is based on top.html from Chris Thielen's sticky-tabs example:

第二种是基于顶部。来自Chris Thielen的粘贴标签示例的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>

Both of these avoid my first two problems above - going to a tab via URL works, and I can leave the page without triggering the tabs destroy bug (presumably because I'm not using "select=").

这两种方法都避免了上面提到的前两个问题——通过URL进入一个选项卡工作，我可以离开页面而不会触发选项卡销毁bug(可能是因为我没有使用“select=”)。

However, there's still a problem, and it happens with both versions. The home.users template has a ui-grid, and if I first go to the page with that tab selected, the grid is empty. I can see the client requesting the grid's data from the server, but it doesn't show it. If I go to the other tab and come back, then it shows the data (after re-fetching it). Worse, this means I can't make the home.users state sticky, because then it gets stuck in the no-data-showing mode.

然而，仍然存在一个问题，这两个版本都有。家庭。用户模板有一个ui-grid，如果我第一次访问选中该选项卡的页面，网格就是空的。我可以看到从服务器请求网格数据的客户端，但它没有显示数据。如果我转到另一个选项卡并返回，那么它将显示数据(在重新取回数据之后)。更糟糕的是，这意味着我不能回家。用户状态为粘性，因为它会被困在无数据显示模式中。

3 个解决方案

#1

The easiest way is to ignore all the fancy ui-bootstrap directives and just make use of the CSS. Then you can end up with something very simple:

最简单的方法是忽略所有漂亮的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>

This will give the appearance of the tabs while maintaining a correct active states. The trouble with using the <tab-header> directive is that you can't cleanly initialize the active state from the ui-router $state, so you get multiple tabs highlighted on page load.

这将显示选项卡的外观，同时保持正确的活动状态。使用指令的问题在于，您无法清晰地从ui-router $状态初始化活动状态，因此在页面加载中会突出显示多个选项卡。

#2

You might consider having a look at this project, ui router plus ui bootstrap tabs, which declares itself as

您可以考虑看看这个项目，ui路由器加上ui引导标签，它声明自己是。

Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router

具有路径支持、使用角的独特防制表板。js + Bootstrap 3 + UI路由器

I haven't tried it as yet, but certainly looks promising.

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

#3

Just did this in a project of mine. This assumes that your routes are wired with ui.router. Hope it helps.

我的一个项目就是这样做的。这假定您的路由与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>

#1