如何使用角度ui.bootstrap卡口与ui.router？ [英] How to use Angular ui.bootstrap tabs with ui.router?

问题描述

下面是我用ui.router初步实现ui.bootstrap标签：

Here's my initial implementation of ui.bootstrap tabs using 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.

首先，它没有，如果我输入一个网址到浏览器中，例如工作... /家/ TAB1。这个问题我presume是，虽然ui.router可能被路由到正确的观点，不知道该如何选择该视图的选项卡。

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.

第二，如果我试图离开页面的状态在不同的页面，它会触发在标签逻辑的明显错误。作为选项卡集被销毁，它破坏了片一个接一个。当它破坏了当前选中的标签，它似乎运行，如果只有该选项卡正在遭到破坏，而不是整个标签组，它将运行相同的逻辑。这将导致它选择其它还未销毁标签，这使得ui.router去那个选项卡的状态，prevents我离开的页面之一。 （此修复程序presumably应该是在销毁过程销毁标签集应该不选择任何选项卡。）

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

第三，某些选项卡视图可能是复杂的，其在施工期间的许多服务器命中。我不想破坏我每次从一个选项卡切换到另一个时间重新创建它们。我宁可要当第一次选择该选项卡中创建一个标签视图，然后坚持，直到我离开页面。选择previously查看选项卡应该只是使它再次可见，而不是重新创建它。

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.

更新：在ui.router FAQ结果有关于如何实现标签的问题。它指向一个额外包，看起来很有希望。希望有与ui.bootstrap标签集成的方法。 <一href=\"http://christopherthielen.github.io/ui-router-extras/#/sticky\">http://christopherthielen.github.io/ui-router-extras/#/sticky

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.bootstrap标签：

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

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

二是基于克里斯·蒂伦的粘性标签的例子的top.html：

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

<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作品标签，我可以离开页面，而不会触发的标签（因为我没有使用选择=presumably）消灭臭虫。

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=").

不过，还是有一个问题，它具有两个版本发生。该home.users模板有一个UI的网格，如果我先去页面选择该选项卡，网格是空的。我可以看到客户端从服务器请求该网格的数据，但它并没有表现出来。如果我去其他选项卡，再回来的话，就显示了数据（后重新获取它）。更糟的是，这意味着我不能让home.users状态粘，因为那卡在无数据显示模式。

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引导指令，只是利用CSS的。然后你就可以结了一些非常简单的：

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:

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

这将给标签的外观，同时保持正确的活动状态。使用的麻烦＆LT;标签头＆GT; 指令是，你不能仅从UI路由器 $状态初始化工作状态，让你获得多个标签突出在页面加载。

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.bootstrap卡口与ui.router？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！