JHipster页面内的Twitter Bootstap标签 - 如何？

Question

我有一个JHipster生成的HTML页面。需要标签，而这个代码是基本的例子引导提供：

<ul class="nav nav-tabs"> 
    <li><a data-toggle="tab" href="#sectionA">Section A</a></li> 
    <li class="active"><a data-toggle="tab" href="#sectionB">Section B</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="sectionA" class="tab-pane fade in active"> 
     <p>Section A content…</p> 
    </div> 
    <div id="sectionB" class="tab-pane fade"> 
     <p>Section B content…</p> 
    </div> 
</div> 

它看起来在第一渲染很好，但是当你点击一个标签，它把你的主页。例如，这可能意味着无法找到href =“＃sectionB”。

猜测：该网页网址

http://localhost:8080/#/mypagename 

所以＃被扔出来的参考？

试过了我能想到的一切。

对此提出建议？

Answer 1

我知道这个问题已经过时了，但是我认为我会记录一个答案，因为我刚刚遇到了同样的问题。
我按照指示here.

基本上，正常的href在Angular中不起作用，您需要使用Bootstrap站点上提供的JavaScript代码。

$('#myTab a').click(function (e) { 
    e.preventDefault() 
    $(this).tab('show') 
}) 

当然，这是Angular，因此您应该为UI操作编写指令。

angular.module('myApp') 
.directive('showtab', 
    function() { 
     return { 
      link: function (scope, element, attrs) { 
       element.click(function(e) { 
        e.preventDefault(); 
        $(element).tab('show'); 
       }); 
      } 
     }; 
    }); 

然后，在你的HTML，

<ul class="nav nav-tabs"> 
    <li class="active"><a showtab="" href="#tabone">Tab One</a></li> 
    <li><a showtab="" href="#tabtwo">Tab Two</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tabone">...</div> 
    <div class="tab-pane" id="tabtwo">...</div> 
</div> 

的showtab指令将使需要切换标签的JavaScript。

注意：您需要包含在html文件中的bootstrap.js。