AngularJS конфликтующего с Bootstrap закладками

Я использую вкладки JavaScript Bootstrap 3 как описан, как это:AngularJS конфликтующего с Bootstrap закладками

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> 
</ul> 

<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div>

Но с Угловым, этим изменением URL в/#/профиль, например ..

Как я могу предотвратить это?

источник

2014-09-28 Billy Assim

Вы используете маршрутизацию Angular? –

yes, routeProvider –

Боковой вопрос: если вы используете Angular, и вы также используете bootstrap, почему бы вам не использовать угловой бутстрап (http://angular-ui.github.io/bootstrap/)? – Blaskovicz

В какой-то момент, если ссылка имела набор атрибутов _target, угловые не перехватывали бы эти клики. Может быть, это будет работать в этом случае?

источник

2014-09-28 00:35:41 Blaskovicz

Работает, примет ответ за 5 минут. –

добавление target = "_ self" отлично работало. Спасибо –

ужасно, но он работает! –

Просто введите data-target вместо атрибута href и он будет работать без изменения URL-адресов.

источник

2014-09-28 13:15:34 mgalic

Я столкнулся с аналогичной проблемой, работая с темой wordpress. Я использовал href для навигации с вкладками, используя bootstrap. Этот ответ помог мне. Я изменил href на целевой объект данных, и он активировал работу с вкладками. Работает как шарм. –

Угловая была перехвата #hrefs, которую я установил на своих загрузочных навигационных вкладках. Изменение атрибута href для цели данных зафиксировало это для меня! спасибо mgalic! (хотя это меня немного беспокоит, что теперь у меня есть тегов без атрибутов href:/oh well) – Jupo

Отличное решение. @Jupo: Если вы хотите иметь hrefs там, чтобы курсор мыши имел правильный стиль, вы все еще можете. Просто установите пустое значение для href, а затем используйте цель данных для фактической навигации. Дополнительную информацию см. На странице https://docs.angularjs.org/api/ng/directive/a. – pbuchheit

AngularJS конфликтующего с Bootstrap закладками

ответ

Смежные вопросы