Вкладки Bootstrap 4 ломаются в AngularJS

Я обнаружил, что при использовании вкладки начальной загрузки с таблетками:

<a class="nav-link" id="tabItem" data-toggle="pill" href="#tabItem"> example </a>

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

Я попытался добавить:

_target="self"

... добавление этого исправляет навигацию только для первых четырех кликов, а затем снова ломается. Когда я проверяю страницу, я вижу, что «активный» класс никогда не очищается, если это установлено.

Я также попытался добавить:

"dependencies": {
     "angular1-ui-bootstrap4": "2.4.22"
 }

через npm, но объем работы, необходимый для создания макета и изменения некоторых предварительно разработанных действий, не стоил моего времени.

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


angularjs bootstrap-4 angular-ui-bootstrap angular1.6
person Kyle Burkett    schedule 05.12.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я исправил это поведение, добавив пользовательскую директиву в angular, которая удаляет старый активный класс и показывает нажатую вкладку:

//
// when bootstrap adds the # to pills it ruins everything!!
// fix that with this:
//
app.directive('tabFix', function () {
    return function (scope, element, attrs) {
        $(element).click(function (event) {
        $(this).siblings("a").removeClass('active');           
        event.preventDefault();
        $(this).tab('show');         
        });        
    }
});

затем, чтобы вызвать директиву, добавьте tab-fix к элементу привязки:

<a class="nav-link" id="tabItem" data-toggle="pill" href="#tabItem" tab-fix> example </a>

Это все исправляет!

person Kyle Burkett    schedule 05.12.2017