引导选项卡将我重定向到另一个 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 }
  ];
});

> demo fiddle