通过 ng-view 包含时，带有 bootstrap 3 手风琴的 AngularJS 不起作用答案

【问题标题】：AngularJS with bootstrap 3 accordion not working when included via ng-view通过 ng-view 包含时，带有 bootstrap 3 手风琴的 AngularJS 不起作用
【发布时间】：2013-09-19 04:22:58
【问题描述】：

问题如下：当我在 ng-view 指令中加载的视图中使用手风琴时，手风琴标题点击不再正常工作

http://plnkr.co/edit/KGwuqDIb7I5NrYCtPOPk?p=preview

如果在没有 ng-view 的页面本身中使用手风琴，则手风琴可以完美运行

http://plnkr.co/edit/8dY7JU1kxjZ2jAKmMIrP?p=preview

我错过了什么的任何线索？

【问题讨论】：

标签： javascript angularjs accordion angularjs-directive twitter-bootstrap-3

【解决方案1】：

实际上，可能有更简单的解决方案。

您只需确保链接不会传播 URL 更改即可。

添加到a标签onclick="return false;"

【讨论】：

这对我有用。这可能不是最佳做法，但我已经坚持了几个小时。谢谢@mfloryan！
你刚刚解决了我几个小时以来一直在努力解决的问题。谢谢！很好的收获。
这就是所谓的解决方案。谢谢:)

【解决方案2】：

您可以清空href="" 并使用

data-target="#collapse" 相反，这对我有用

即

<a data-toggle="collapse" data-parent="#accordion" href="" 
data-target="#collapse1">Collapsible Group 1</a>

【讨论】：

如果可以的话+10。这应该是公认的答案！像html5Mode 这样的一般应用程序配置中的非侵入性以及对其他类似组件使用相同属性的良好做法
在尝试了很多东西之后，这就是我的解决方案！
+1 这对我帮助很大，即使在切换到 html5 模式（并重写我的 expressJS url）之后，我的手风琴也出现了奇怪的行为——添加 data-target 并清空我的 href 补救所有奇怪的手风琴行为——非常感谢！

【解决方案3】：

问题在于 Bootstrap 在 a 标记中附加了 #according_name。这会触发 AngularJS 路由，并且由于路由更改 test.html 会在每次点击手风琴链接时再次加载。

您的选择是尝试将$locationProvider 配置为使用带有 hashbag 的 HTML5 模式（如果可行）

$locationProvider.html5Mode(true).hashPrefix('!');

查看一些文档here

其他方法是使用 angular-ui 组件，但尚未移植到支持版本 3 的引导程序。

【讨论】：

嘿，我将 .html5Mode 更改为 false，现在它可以工作了！谢谢:)
您添加的文档似乎不再可用。你能再添加一个链接吗？
@CodedContainer 请立即查看。

【解决方案4】：

我在同时使用 href 和 data-target 时遇到了问题，所以如果您在应用程序中使用它，我建议您指定一个或另一个，但不要同时使用。

当我同时使用两者时，我一点击就会被重定向到我的登录页面。指定一个或另一个它工作正常，但不能同时使用。

【讨论】：