Блог

У меня есть сгенерированная 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 =»#sectionB».

Угадайте: URL страницы

 http://localhost:8080/#/mypagename
  

итак, # выбрасывает ссылку?

Я перепробовал все, что мог придумать.

Предложения?

Я знаю, что этот вопрос старый, но подумал, что запишу ответ, так как я только что столкнулся с этой же проблемой.
Я следовал инструкциям здесь.

В принципе, обычные ссылки href не работают в Angular, вам нужно использовать код javascript, предоставленный на сайте начальной загрузки.

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

Конечно, это Angular, поэтому вам следует написать директиву для манипуляций с пользовательским интерфейсом.

 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, необходимый для переключения вкладок.

Примечание: вам понадобится bootstrap.js включен в ваш HTML-файл.

Jhispter с angularjs использует https://angular-ui.github.io/bootstrap / поскольку использование bootstrap с angular не полностью совместимо, поэтому способ создания вкладок выглядит следующим образом:

 <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>