49

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

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

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

但是现在，当我单击锚元素时，Angular 会拦截此单击并尝试路由附加选择，这会导致页面刷新...

有没有办法解决它？

4

4 回答 4

157

解决方案就像用data-target替换href属性一样简单。这解决了这个问题：

<li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
于 2013-11-13T07:07:28.750 回答
9

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

CSS有一个小的区别。当使用data-target vs href时，光标不再是指针。如果您不想添加额外的 CSS，可以执行以下操作：

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

这只是一个建议，而不是一个优雅的解决方案。但是，如果您出于某种原因想使用 href，请添加onclick="return false;"

于 2015-03-16T18:59:58.013 回答
4

只需替换href属性data-target

<li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>
于 2016-02-28T21:44:02.840 回答
0

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

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

添加 href 会导致光标切换到手形，但将其留空为“”不会导致任何页面重新加载。

于 2016-01-08T06:06:40.793 回答