Bootstrap选项卡将我重定向到另一个HTML页面

Question

我一直致力于AngularJS计划的标签功能，而且我遇到了所述功能的HTML编码问题。有效地，当我加载页面时，信息按照我希望的方式呈现。但是，一旦我点击选项卡，它就会将我重定向到我正在处理的应用程序的主页面。我错过了导致我这个错误的任何内容吗？

<div class="profile-body">
  <div class="col-lg-12">
    <div class="tabbable">
      <ul class="nav nav-tabs tabs-flat  nav-justified" id="myTab11">
        <li class="active">
          <a href="#overview" data-toggle="tab">
            Tab 
          </a>
        </li>
        <li class="tab-red">
          <a href="#timeline" data-toggle="tab">
              Tab Tab
          </a>
        </li>
      </ul>
      <div class="tab-content tabs-flat">
        <div class="tab-pane active" id="overview">
          <div class="row">
            <!--Information-->
          </div>
          <div id="timeline" class="tab-pane">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您应该使用支持AngularJS的UI bootstrap，而不是使用引导程序。属性href="#overview"确实会创建您所谈论的重定向。

视图

<div ng-controller="MyCtrl">
  <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="$index + 1" 
             ng-repeat="tab in tabs" 
             heading="{{tab.title}}" 
             disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
    <uib-tab index="3" select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>
  </uib-tabset>
</div>

AngularJS应用程序

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('MyCtrl', function($scope) {
    $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];
});

<强>＆GT; demo fiddle