支持路由的AngularJS UI Bootstrap選項卡

Question

我想在我的項目中使用AngularJS UI Bootstrap Tabs，但我需要它來支持路由。

例如：

​​

據我可以從源代碼告訴，目前tabs和pane指令不支持路由。

什麼是添加路由的最佳方式？

Answer 1

要添加路由，通常使用ng-view指令。我不確定很容易修改角度用戶界面以支持您要查找的內容，但here's a plunker大致顯示了我認爲您要查找的內容（這不一定是實現此目的的最佳方式 - 希望有人可以爲您提供這個更好的解決或改善）

Answer 2

這有啥可能夠做到你想要什麼：

https://github.com/angular-ui/ui-router

Answer 3

，你可以通過自己的自定義鍵值對的路由定義和實現這一目標。 這裏有一個很好的例子： http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 4

我也有這個要求，我做類似於克里斯提供的答案的東西，但我還使用​​，因爲ngRouter不支持嵌套的意見，並有可能你會在另一個視圖（我做過）中看到標籤內容視圖，這對ng-view不起作用。

Answer 5

只是一個小的添加到接受的答案： 我需要保持當前選項卡頁面刷新，所以我用這樣的開關：

$scope.tabs = [ 
      { link : '#/furnizori', label : 'Furnizori' }, 
      { link : '#/total', label : 'Total' }, 
      { link : '#/clienti', label : 'Clienti' }, 
      { link : '#/centralizator', label : 'Centralizator' }, 
      { link : '#/optiuni', label : 'Optiuni' } 
     ]; 

     switch ($location.path()) { 
      case '/furnizori': 
       $scope.selectedTab = $scope.tabs[0]; 
       break; 

      case '/total': 
       $scope.selectedTab = $scope.tabs[1]; 
       break; 

      case '/clienti': 
       $scope.selectedTab = $scope.tabs[2]; 
       break; 

      case '/centralizator': 
       $scope.selectedTab = $scope.tabs[3]; 
       break; 

      case '/optiuni': 
       $scope.selectedTab = $scope.tabs[4]; 
       break; 

      default: 
       $scope.selectedTab = $scope.tabs[0]; 
       break; 
     } 

Answer 6

同意使用UI-路由器的跟蹤狀態和嵌套視圖非常有效。說到特別的你的引導標籤的問題有很大的實現，它利用UI路由器：UI-Router Tabs

Answer 7

這個答案真的幫了我http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx（非常簡單但功能強大的解決方案）

Answer 8

使用的數據目標=「＃TAB1」。爲我工作

Answer 9

如果你有一個稱爲設置的路線，並且你想在該設置頁面中有標籤，就像這樣工作。

<div class="right-side" align="center"> 
    <div class="settings-body"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#!/settings#private_email">Private email</a></li> 
      <li><a data-toggle="tab" href="#!/settings#signature">Signature</a></li> 
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div id="private_email" class="tab-pane fade in active"> 
      <div class="row" ng-controller="SettingsController"> 
       <div> 
        <button class="btn btn-primary" ng-click="activatePrivateEmail()">Activate email</button> 
        <button class="btn btn-danger">Deactivate email</button> 
       </div> 
      </div> 
      </div> 
      <div id="signature" class="tab-pane fade"> 
       <textarea ui-tinymce="tinymceOptions" ng-model="signature"></textarea> 
       <div class="send-btn"> 
       <button name="send" ng-click="" class="btn btn-primary">Save signature</button> 
       </div> 
      </div> 
      <div id="menu2" class="tab-pane fade"> 
      <h3>Menu 2</h3> 
      <p>Some content in menu 2.</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 10

我得到的路由工作方式如下標籤。

它能夠從動態選項卡完成所需的任何操作，而且其實非常簡單。

• 標籤與ui-view，這樣可以動態加載模板，在URL
• 更新路由
• 集歷史狀態
• 當直接導航到路由與標籤視圖，正確的標籤標記爲active。

---

定義一個帶參數的標籤在你的路由器

.state('app.tabs', { 
    url   : '/tabs', 
    template : template/tabs.html, 
}) 
.state('app.tabs.tab1', { 
    url   : '/tab1', 
    templateUrl : 'template/tab1.html', 
    params  : { 
     tab   : 'tab1' 
    } 
}) 
.state('app.visitors.browser.analytics', { 
    url   : '/tab1', 
    templateUrl : 'template/tab2.html', 
    params  : { 
     tab   : 'tab2' 
    } 
}) 

的標籤模板（tabs.html）是

<div ng-controller="TabCtrl as $tabs"> 
    <uib-tabset active="$tabs.activeTab"> 
     <uib-tab heading="This is tab 1" index="'tab1'" ui-sref="app.tabs.tab1"></uib-tab> 
     <uib-tab heading="This is tab 2" index="'tab2'" ui-sref="app.tabs.tab2"></uib-tab> 
    </uib-tabset> 
    <div ui-view></div> 
</div> 

這是一個非常簡單的控制器配對獲取當前活動標籤：

app.controller('TabCtrl', function($stateParams) { 
    this.activeTab = $stateParams.tab; 
})