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

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可能路由到正确的视图,但它不知道选择该视图的选项卡.

其次,如果我尝试将页面保留在不同页面上的状态,则会触发选项卡逻辑中的明显错误.当标签集被销毁时,它会逐个销毁标签.当它破坏当前选定的选项卡时,它似乎运行的逻辑与仅在该选项卡被销毁时运行的逻辑相同,而不是整个选项卡集.这导致它选择其中一个尚未销毁的选项卡,这使得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的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工作转到选项卡,我可以离开页面而不触发标签销毁bug(可能是因为我没有使用"select =").

但是,仍然存在问题,两种版本都会出现问题.home.users模板有一个ui-grid,如果我首先转到选中该选项卡的页面,则网格为空.我可以看到客户端从服务器请求网格数据,但它没有显示它.如果我转到另一个选项卡并返回,则显示数据(重新获取后).更糟糕的是,这意味着我无法使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,因此您可以在页面加载时突出显示多个选项卡.

Answer 2

你可以考虑看一下这个项目,ui router plus ui bootstrap tabs,它声明为

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

我还没有尝试过,但肯定看起来很有希望.