Закладки Bootstrap с переключением данных вызывают перезагрузку в angularjs

Я только что перешел на AngularJS 1.2. И я понял, что все элементы меню/навигации, которые были настроены с помощью переключения данных, например:

<li><a href="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

больше не работают. Они должны переключать элемент с id = "extraSelection" - и вот как Angular и Bootstrap работали, когда я использовал версию 1.0.8 Angular.

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

Есть ли способ исправить это?

Ответ 1

Решение так же просто, как замена атрибута href с помощью цели данных. Это решает проблему:

<li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

Ответ 2

Как указывал dragonfly, data-target работает отлично, а не href.

В CSS есть небольшая разница. Если используется цель данных vs href, курсор больше не является указателем . Если вы не хотите добавлять дополнительные CSS, вы можете сделать следующее:

<a href="#additionalSelection" data-toggle="tab" onclick="return false;">Selection</a>

Это просто предложение, а не элегантное решение. Но если вы хотите использовать href по какой-либо причине, добавьте onclick="return false;"

Ответ 3

Просто замените атрибут href data-target

<li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>

Ответ 4

Решение, сохраняющее курсор (в то время как все еще полагается на цель данных вместо href для навигации):

<li><a href="" data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

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