我想在我的项目中使用AngularJS UI 引导选项卡，但我需要它来支持路由。
例如：
Tab URL
--------------------
Jobs /jobs
Invoices /invoices
Payments /payments
据我从源代码中可以看出，当前tabs和pane指令不支持路由。
添加路由的最佳方法是什么？
问问题
42177 次
10 回答
40
要添加路由，您通常使用 ng-view 指令。我不确定修改 Angular UI 以支持您正在寻找的内容是否容易，但这里有一个粗略显示我认为您正在寻找的东西（这不一定是最好的方法 - 希望有人可以给您有更好的解决方案或对此进行改进）
于 2013-06-02T08:31:52.047 回答
16
使用数据目标=“#tab1”。为我工作
于 2015-10-05T21:16:33.427 回答
6
这个答案真的帮助了我http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx（非常简单但功能强大的解决方案）
于 2015-02-18T15:40:51.580 回答
5
我也有这个要求，我正在做类似于 Chris 提供的答案的事情，但我也在使用AngularUI router，因为 ngRouter 不支持嵌套视图，并且您可能会在另一个视图中拥有选项卡内容视图（我做到了）这不适用于 ng-view。
于 2014-05-19T16:17:36.077 回答
2
您可以在路由定义中传递您自己的自定义键值对并实现此目的。这是一个很好的例子： http ://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
于 2013-07-03T05:39:02.690 回答
2
同意使用 UI-Router 来跟踪状态并在嵌套视图中工作得很好。特别谈到您的 Bootstrap 选项卡问题，有一个很好的利用 UI 路由器的实现：UI-Router 选项卡
于 2015-02-09T20:59:05.803 回答
1
如果您有一条名为设置的路线，并且您希望在该设置页面中有选项卡，则类似这样的工作。
<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>
于 2017-05-19T07:01:23.813 回答
1
我得到了路由选项卡，其工作方式如下。
它能够从动态选项卡中做任何你想做的事情，而且它实际上非常简单。
- 带有 的选项卡
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;
})
于 2017-06-30T12:56:06.267 回答
0
只是对已接受答案的一个小补充：我需要在页面刷新时保持当前选项卡，所以我使用了这样的开关：
$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;
}
于 2015-02-07T18:40:03.740 回答
-2
这可以做你想做的事：
于 2013-06-07T05:02:46.313 回答