支持路由的AngularJS UI Bootstrap选项卡

我想在我的项目中使用AngularJS UI引导选项卡 ，但我需要它来支持路由。

例如：

Tab URL -------------------- Jobs /jobs Invoices /invoices Payments /payments 

据我从源代码可以看出，目前的tabs和pane指令不支持路由。

什么是最好的方式来添加路由？

Answer 1

要添加路由，通常使用ng-view指令。 我不确定很容易修改有angular度的用户界面来支持你要找的东西，但是这里有一个大概的东西，大致显示了我认为你在找什么（这不一定是最好的方法 – 希望有人可以给你更好的解决scheme或改进）

Answer 2

使用data-target =“＃tab1”。 为我工作

Answer 3

我也有这个要求，我做的东西类似于由克里斯提供的答案，但我也使用AngularUI路由器 ，因为ngRouter不支持嵌套的意见，这是可能的，你可以在另一个视图内的标签内容视图（我做了），这不会与ng-view一起工作。

Answer 4

这个答案真的帮助我http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx （非常简单但function强大的解决scheme）

Answer 5

同意使用跟踪状态的UI-Router，并且使用嵌套视图很好地工作。 特别是你的引导标签问题，有一个很好的实现，利用UI路由器： UI路由器选项卡

Answer 6

您可以在路由定义中传递您自己的自定义键值对并实现此目的。 这里是一个很好的例子： http : //www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 7

如果你有一个称为设置的路线，你想在该设置页面有选项卡这样的工作。

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

只是一小部分添加到接受的答案：我需要保持页面刷新当前标签，所以我用这样的开关：

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

我用下面的方式得到了路由的选项卡。

它能够从dynamic标签中做所有你想要的，而且其实很简单。

• 带有ui-view标签，因此可以dynamic加载模板，
• 更新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; }) 

Answer 10

这个能够做你想做的事情：

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