如何在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進入選項卡有效，並且我可以離開頁面而不會觸發選項卡銷毀錯誤（大概是因為我沒有使用“ 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干凈地初始化活動$state ，因此在頁面加載時會突出顯示多個選項卡。

Answer 2

您可以考慮看看該項目， ui路由器以及ui引導程序選項卡 ，它們將自身聲明為

使用Angular.js + Bootstrap 3 + UI Router的具有路由支持的防白痴標簽窗格

我還沒有嘗試過，但是看起來很有希望。

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