Bootstrap 4 вкладки ломаются в угловых

Question

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

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

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

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

_target="self"

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

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

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

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

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

Answer 1

Я исправил это поведение, добавив пользовательскую директиву 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> 

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