Twitter Bootstap Tabs inside JHipster page - how to? -

Twitter Bootstap Tabs inside JHipster page - how to? -

i have jhipster generated html page. need tabs, , code basic illustration bootstrap provide:

<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 content…</p> </div> <div id="sectionb" class="tab-pane fade"> <p>section b content…</p> </div> </div>

it looks fine on first rendering, when click tab takes home page. presumably means cant find href="#sectionb", example.

guess: page url

http://localhost:8080/#/mypagename

so # throwing out reference?

have tried can think of.

suggestions?

i know question old, thought i'd record answer, since ran same problem. followed instructions here.

basically, normal href's don't work in angular, need utilize javascript code provided on bootstrap site.

$('#mytab a').click(function (e) { e.preventdefault() $(this).tab('show') })

of course, angular should write directive ui manipulations.

angular.module('myapp') .directive('showtab', function () { homecoming { link: function (scope, element, attrs) { element.click(function(e) { e.preventdefault(); $(element).tab('show'); }); } }; });

then, in 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>

the showtab directive enable javascript necessary switch tabs.

note: need bootstrap.js included in html file.

twitter-bootstrap jhipster