我想在我的项目中使用AngularJS UI引导选项卡，但我需要它来支持路由。
例如:Tab URL
--------------------
Jobs /jobs
Invoices /invoices
Payments /payments
据我从源代码中得知，当前的tabs和pane指令不支持路由。
添加路由的最好方法是什么?
要添加路由，通常使用ng-view指令。我不确定修改角度UI来支持你正在寻找的东西是否足够容易，但这里有一个柱塞，大致显示了我认为你正在寻找的东西(这不一定是最好的方法-希望有人能给你一个更好的解决方案或改进这一点)
Use data-target="#tab1"。
这个答案真的帮助了我http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx(非常简单但功能强大的解决方案)
我也有这个要求，我正在做一些类似于Chris提供的答案的事情，但我也使用AngularUI路由器，因为ngRouter不支持嵌套视图，你可能会在另一个视图中有标签内容视图(我做过)，这与ng-view不兼容。
你可以在路由定义中传递你自己的自定义键值对来实现这一点。这里有一个很好的例子:http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
同意使用UI-Router，它可以跟踪状态，并且在嵌套视图中工作得很好。特别说到你的Bootstrap选项卡问题，有一个很好的实现，利用UI路由器:UI-Router选项卡
如果你有一个名为settings的路由，并且你希望在该设置页面中有选项卡，那么像这样的方法就可以了。
<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>
我得到的选项卡的路由工作方式如下。
它可以在动态选项卡中做你想做的一切，而且它实际上非常简单。
- 标签与
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;
})
只是一个小小的补充:我需要在页面刷新时保持当前选项卡，所以我使用了这样的开关:
$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;
}
这样就可以随心所欲了:
https://github.com/angular-ui/ui-router