AngularJS conflicting with Bootstrap tabs

Question

I'm using the JavaScript Bootstrap 3 tabs as documented, like this:

<!-- 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>

But with Angular, it's changing the URL to /#/profile for instance..

How can I prevent this?

Side question: if you're using Angular and you're also using bootstrap, why aren't you using angular bootstrap (angular-ui.github.io/bootstrap)? — Blaskovicz
– Blaskovicz, Commented Sep 28, 2014 at 0:37

mgalic · Accepted Answer · 2014-09-28 13:15:34Z

26

Just put data-target instead of href attribute and it will work without changing urls.

answered Sep 28, 2014 at 13:15

mgalic

1,9191 gold badge13 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bobby Francis Joseph Over a year ago

I was facing a similar issue while working with a wordpress theme. I was using href for tabbed navigation using bootstrap. This answer helped me.I changed href to data-target and it got the tabbed navigation working. Works like charm..

cloudberry Over a year ago

Angular was intercepting the #hrefs I set on my bootstrap nav-tabs. Changing the href attribute to data-target fixed it for me! thanks mgalic! (although it bugs me just a little bit that now I have <a> tags without href attributes :/ oh well)

pbuchheit Over a year ago

Great solution. @Jupo: If you want to have the hrefs there so that the mouse cursor has the correct styling you still can. Just set an empty value for href and then use the data-target to do the actual navigation. See docs.angularjs.org/api/ng/directive/a for more info.

Vern Jensen Over a year ago

@pbuchheit -- You answered my cursor question before I could even ask it. Thanks!

Blaskovicz · Accepted Answer · 2014-09-28 00:35:41Z

10

At one point, if a link had the _target attribute set, angular wouldn't intercept those clicks. Perhaps that will work in this case?

answered Sep 28, 2014 at 0:35

Blaskovicz

6,1907 gold badges43 silver badges50 bronze badges

Collectives™ on Stack Overflow

AngularJS conflicting with Bootstrap tabs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related