Question

我有一个JHipster生成的html页面。需要标签，这段代码是Bootstrap提供的基本示例：

<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 =＆＃34;＃sectionB＆＃34;，例如。

猜猜：页面网址是

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。

Answer 2

带有angularjs的Jhispter使用https://angular-ui.github.io/bootstrap/，因为使用带角度的bootstrap并不完全兼容，所以你创建标签的方式是这样的：

<uib-tabset>
    <uib-tab index="0" heading="Justified">Justified content</uib-tab>
    <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
    <uib-tab index="2" heading="Long Justified">Labeled Justified</uib-tab>
</uib-tabset>

JHipster页面内的Twitter Bootstrap选项卡 - 如何？

2 个答案: