twitter-bootstrap 在 AngularJS/Bootstrap 中进行标签导航的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29934180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The Right Way to Do Tab Navigation in AngularJS / Bootstrap
提问by Ben Pearce
I want to set up tab based navigation for a web site using AngularJs and Bootstrap and I want to do it the 'right' way. As far as I can tell the 'right' way to set up an angular site is via the AngularJS Seed. I implemented this and what I got as a templated multi file tab site with the following basic ingredients.
我想使用 AngularJs 和 Bootstrap 为网站设置基于选项卡的导航，我想以“正确”的方式进行。据我所知，设置角度站点的“正确”方法是通过AngularJS Seed。我实现了这个以及我作为模板化多文件选项卡站点获得的内容，其中包含以下基本成分。
With Angular
带角
index.html:
索引.html：
<ul class="nav nav-tabs">
<li class="active"><a href="#/view1">Home</a></li>
<li><a href="#/view2">Menu 1</a></li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
view1.js:
视图1.js：
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
view1.html:
视图1.html：
<div>here's some html</div>
...for view2.
...对于view2。
With Bootstrap
使用引导程序
As far as I can tell the 'right' way to implement tabs with bootstrap is as follows:
据我所知，使用引导程序实现选项卡的“正确”方法如下：
index.html:
索引.html：
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
<li><a href="#orange" data-toggle="tab">Orange</a></li>
<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
<li><a href="#green" data-toggle="tab">Green</a></li>
<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
After lots of messing around I still can't seem to get the boot strap functionality, using Angulars templated model. Can anyone advise me on the 'right' way to do this?
经过大量的混乱之后，我似乎仍然无法使用 Angulars 模板模型获得引导带功能。任何人都可以就“正确”的方法向我提出建议吗？
回答by jake
Take a look at UI Bootstrap. It's essentially Bootstrap components built with Angular directives. There's a Tabs directive that will simplify what you're trying to accomplish.
看看UI Bootstrap。它本质上是使用 Angular 指令构建的 Bootstrap 组件。有一个 Tabs 指令可以简化您要完成的任务。
回答by Gerard
Give every tab a <div>and a condition. In the controller, initialize the tabsetand fetch the correct tab from the routeparameters.
给每个选项卡一个<div>和一个条件。在控制器中，初始化tabset并从routeparameters.
So, your page looks like this:
因此，您的页面如下所示：
<div ng-if="vm.showTab2">
and your controller (simplified):
和您的控制器（简化）：
var vm = this;
vm.showTab1 = true;
vm.showTab2 = false;
vm.ToggleTab = function(tabId) {
vm.showTab1 = tabId === ShowTab1;
vm.showTab2 = tabId === ShowTab2;
...
}
...
init();
function init() {
// Get the tabID parameter from the URL (via $routeParams)
var tabId = $routeParams.tabId;
if (tabId !== undefined) {
vm.ToggleTab(tabId);
}
...
}
Your routing:
您的路由：
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view:tabId', {
templateUrl: 'view1/view.html',
controller: 'ViewCtrl'
});
}])
And pass the right tabIdin your url: '#view/2' (where 2 === ShowTab2).
并tabId在您的网址中传递正确的信息：'#view/2' (where 2 === ShowTab2).
