AngularJS与Bootstrap选项卡冲突

Question

我正在按照文档使用JavaScript Bootstrap 3标签，像这样：

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

但是使用Angular后，它会将URL更改为例如 /#/profile。

我该如何防止这种情况发生？

- Billy Assim

---

你正在使用Angular的路由吗？ - PM 77-1

旁边的问题：如果您正在使用Angular并且还在使用bootstrap，为什么不使用angular bootstrap（http://angular-ui.github.io/bootstrap/）？ - Blaskovicz

Answer 1

只需将href属性替换为data-target，而无需更改URL，它就可以正常工作。

- mgalic

---

我在使用WordPress主题时遇到了类似的问题。我正在使用Bootstrap进行选项卡导航，使用href属性。这个答案帮助了我。我将href更改为data-target，然后选项卡导航就正常工作了。非常好用。 - Bobby Francis Joseph

Angular 拦截了我在 Bootstrap 导航标签上设置的 #hrefs。将 href 属性更改为 data-target 解决了我的问题！谢谢 mgalic！（虽然现在我有一点不爽，因为我有了没有 href 属性的 <a> 标签 :/ 哦，无妨） - cloudberry

好的解决方案。@Jupo: 如果你希望在那里放置 href，以便鼠标光标有正确的样式，你仍然可以这样做。只需将 href 设置为空值，然后使用 data-target 进行实际导航即可。欲了解更多信息，请参见 https://docs.angularjs.org/api/ng/directive/a。 - pbuchheit

@pbuchheit -- 在我还没来得及问出光标的问题之前，您已经回答了它。谢谢！ - Vern Jensen

Answer 2

曾经，如果一个链接设置了_target属性，Angular就不会拦截这些点击事件。也许在这种情况下可以尝试一下？

- Blaskovicz