带有数据切换的引导选项卡导致 angularjs 重新加载

Posted 2023-02-19

【中文标题】带有数据切换的引导选项卡导致 angularjs 重新加载

【英文标题】：Bootstrap's tabs with data-toggle cause reload in angularjs

【发布时间】：2013-11-24 16:09:21

【问题描述】：

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

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

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

但是现在，当我单击锚元素时，Angular 会拦截此单击并尝试转到路由 additionalSelection 并导致页面刷新...

有办法解决吗？

【问题讨论】：

你能提供一个plunker吗？

【参考方案1】：

解决方案很简单，只需将 href 属性替换为 data-target。这样就解决了问题：

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

【讨论】：

下午确实被困在这个问题上（嗯，这基本上是因为我将滚动混淆为意味着选择一个标签，哈哈，并且没有结果地使用 $anchorScroll :P 寻找解决方案）。这对 BS3 来说是完美的，我不想仅仅为此而引入 angular-bootstrap-ui 模块！谢谢

我遇到了同样的问题。解决方案奏效了。它停止重定向。但该列表现在没有展开或折叠。有人可以帮忙吗？

上述解决方案（在Bootstrap documentation 中也完全相同）仅在不使用 Angular 时有效，至少对于某些版本。我假设这就是为什么 Angular 的人创建了这个库 Angular UI Bootstrap 作为解决这些冲突的方法。尚未对其进行全面调查以准确了解冲突，但this article 揭示了由于 jQuery 可能导致的相关冲突。

简而言之，由于我在上面的评论中用完了空间，这里是文章中的一个 sn-p：“这就是为什么我们不能只使用 Bootstrap javascript。它依赖于 jQuery而且我们不希望 jQuery 在我们的 Angular 项目中翻找。如果我们尝试将变量绑定到组件，它将无法正常工作。”

我想我可能不得不用这个来打破我的头，但这样一个简单的修复。我在使用主干路由器旁边的引导选项卡时遇到了问题。

【参考方案2】：

正如dragonfly 指出的那样，data-target 工作正常而不是href。

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

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

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

【参考方案3】：

只需从data-target 替换href 属性

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

【参考方案4】：

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

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

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