Bootstrap's tabs with data-toggle cause reload in angularjs

Question

I've just migrated to AngularJS 1.2. And I've realized that all my menu/navigation elements that were configured with data-toggle, for instance:

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

are not working any more. They should toggle element with id="additionalSelection" - and this is how Angular & Bootstrap worked when I was using version 1.0.8 of Angular.

But now, when I click anchor element, Angular intercepts this click and tries to go to route additionalSelection and it causes page refresh...

Is there a way to fix it?

Could you provide a plunker? – hugo der hungrige Nov 12 '13 at 23:05 — hugo der hungrige, Nov 12 '13 at 23:05

score 157 · Accepted Answer · edited Dec 27 '13 at 12:59

157

The solution is as simple as replacing href attribute with data-target. That solves the issue:

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

edited Dec 27 '13 at 12:59

joragupra

692
1
12
23

answered Nov 13 '13 at 07:07

dragonfly

17,407
30
110
219

literally was stuck on this for the afternoon ( well, it was basically because i confused scrolling to mean selecting a tab lol and was unfruitfully looking at solutions using $anchorScroll :P ). This is perfect for BS3, i didn't want to pull in the angular-bootstrap-ui module just for this! Thank you – a7omiton Jun 06 '15 at 19:19
I had the same problem. The solution worked. It stopped redirecting. But the list now doesnot expand or collpase. Can anyone help? – Praburaj Jul 02 '15 at 07:03
The above solution (also exactly the same in [Bootstrap documentation](http://getbootstrap.com/javascript/#collapse)) only works when _not_ using Angular, at least for certain versions. I am assuming this is why the Angular folks created this library [Angular UI Bootstrap](https://angular-ui.github.io/bootstrap/) as a workaround to these sorts of conflicts. Haven't investigated it fully to understand exactly the conflict, but [this article](https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together) sheds some light on possibly related conflicts due to jQuery. – michaelok Jan 08 '16 at 17:28
In a nutshell, since I ran out of space in the above comment, here is a snippet from the article: "This is why we can’t just use Bootstrap JavaScript. It relies on jQuery and we don’t want jQuery rummaging around our Angular projects. If we try to bind variables to the components, it won’t work." – michaelok Jan 08 '16 at 17:30
I thought I might have to break my head with this but such a simple fix. I was having issues using bootstrap tab alongside backbone router. – Ananda Aug 13 '16 at 12:55
You saved my time. – sanjeev shetty Oct 10 '19 at 11:10

Brian · Answer 2 · 2016-05-09T22:39:23.463

As dragonfly pointed out, data-target works fine instead of href.

There is a small difference in CSS. When data-target is used vs href, the cursor is not a pointer anymore. If you don't want to add extra CSS, you can do the following:

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

This is just a suggestion, not an elegant solution. But if you want to use href for some reason, add onclick="return false;"

score 5 · Answer 3 · edited Feb 28 '16 at 21:46

5

Simply replace href attribute from data-target

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

edited Feb 28 '16 at 21:46

Tunaki

132,869
46
340
423

answered Feb 28 '16 at 21:44

Rana Pratap Singh

867
12
18

score 0 · Answer 4 · answered Jan 08 '16 at 06:06

The solution preserving the cursor (while still relying on data-target instead of href to navigate) is:

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

the addition of href causes the cursor to switch to the hand, but leaving it blank as "" doesn't cause any page reloads.

Bootstrap's tabs with data-toggle cause reload in angularjs

4 Answers4

Linked