支持路由的AngularJS UI Bootstrap选项卡

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

例如:

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

据我从源代码可以看出,目前的tabspane指令不支持路由。

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

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

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

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

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

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

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

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

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

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

 $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; } 

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

它能够从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; }) 

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

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