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

Question

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

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

不再工作了。他们应该用id =“additionalSelection”来切换元素 - 这就是Angular＆amp;当我使用Angular的1.0.8版本时，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有一点不同。使用数据目标与 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>

Answer 4

保留光标的解决方案（仍然依赖于数据目标而不是href来导航）是：

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

添加href会导致光标切换到手，但是将其留空为＆＃34;＆＃34;不会导致任何页面重新加载。