Question

我想使用AngularJs和Bootstrap为网站设置基于标签的导航，我想这样做＆＃39;正确＆＃39;办法。据我所知，正确的＆＃39;设置角度站点的方法是通过AngularJS Seed。我实现了这个以及我作为模板化多文件标签网站获得的内容，其中包含以下基本要素。

使用Angular

的index.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：

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

<div>here's some html</div>

... for view2。

使用Bootstrap

据我所知，正确的＆＃39;使用bootstrap实现制表符的方法如下：

的index.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>

经过大量的搞乱后，我仍然无法使用Angulars模板模型获得引导带功能。谁能告诉我关于＆＃39;权利＆＃39;这样做的方法？

Answer 1

看看UI Bootstrap。它本质上是使用Angular指令构建的Bootstrap组件。有一个Tabs指令可以简化你想要完成的任务。

Answer 2

为每个标签提供<div>和条件。在控制器中，初始化tabset并从routeparameters中获取正确的标签。

因此，您的页面如下所示：

<div ng-if="vm.showTab2">

和您的控制器（简化）：

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);
    }
    ...
}

您的路线：

.config(['$routeProvider', function($routeProvider) {
 $routeProvider.when('/view:tabId', {
   templateUrl: 'view1/view.html',
   controller: 'ViewCtrl'
 });
}])

并在您的网址中传递右tabId：'#view/2' (where 2 === ShowTab2).

在AngularJS / Bootstrap中进行标签导航的正确方法

2 个答案: