angularjs - 带有 AngularJS 的 Bootstrap 选项卡

Question

我在 AngularJS 中使用引导选项卡时遇到问题。

 <div class="tab-container">
    <ul class="nav nav-tabs">
       <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
       <li><a href="#profile" data-toggle="tab">Profile</a></li>
       <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>
 <div class="tab-content">
    <div class="tab-pane active cont" id="home">
        <h3 class="hthin">Basic Tabs</h3>
        <p>This is an example of tabs </p>
     </div>

     <div class="tab-pane cont" id="profile">
       <h2>Typography</h2>
       <p>This is just an example of content 
     </div>

     <div class="tab-pane" id="messages">..sdfsdfsfsdf.
     </div>
  </div>
</div>

问题是，当我选择一个选项卡(例如 Home 或 Profile)时，我被重定向到/home 或/profile url 而不是显示选项卡本身的内容。

我有一种感觉，这可以通过指令以某种方式实现，并防止重定向到主页或个人资料，而是显示选项卡内容。

Answer 1

您可以尝试使用位于此处的 Angular UI 引导组件，http://angular-ui.github.io/bootstrap/