带有数据切换的Bootstrap选项卡会导致在angularjs中重新加载

Question

我刚刚迁移到AngularJS 1.2.我已经意识到所有配置了数据切换的菜单/导航元素,例如:

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

不再工作了.他们应该用id ="additionalSelection"切换元素 - 这就是当我使用Angular 1.0.8版时Angular&Bootstrap的工作方式.

但是现在,当我点击锚元素时,Angular拦截了这个点击并尝试去路由additionalSelection,它会导致页面刷新......

有办法解决吗？

Answer 1

解决方案就像用数据目标替换href属性一样简单.这解决了这个问题:

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

Answer 2

正如所dragonfly指出的,data-target工作正常而不是href.

CSS有一点不同.当使用数据目标 vs href时,光标不再是指针.如果您不想添加额外的CSS,可以执行以下操作:

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

这只是一个建议,而不是一个优雅的解决方案.但是如果你想因某些原因使用href,请添加onclick="return false;"

Answer 3

只需将href属性替换为data-target

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