javascript 当通过 ng-view 包含时，带有 bootstrap 3 手风琴的 AngularJS 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18803955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS with bootstrap 3 accordion not working when included via ng-view
提问by Stephan Grobler
The problem is the following: As soon as I use the accordion in a view that is loaded in the ng-view directive, the accordion title clicks dont work correctly anymore
问题如下：只要我在 ng-view 指令中加载的视图中使用手风琴，手风琴标题点击就不再正常工作
http://plnkr.co/edit/KGwuqDIb7I5NrYCtPOPk?p=preview
http://plnkr.co/edit/KGwuqDIb7I5NrYCtPOPk?p=preview
If the accordion is use in the page itself with no ng-view, the accordion works perfectly
如果在没有 ng-view 的页面中使用手风琴，则手风琴完美运行
http://plnkr.co/edit/8dY7JU1kxjZ2jAKmMIrP?p=preview
http://plnkr.co/edit/8dY7JU1kxjZ2jAKmMIrP?p=preview
Any clue to what Im missing?
我缺少什么的任何线索？
采纳答案by Chandermani
The problem is that Bootstrap appends #according_namewithin a atag. This triggers a AngularJS routing and due to route change test.htmlis loaded again on every click on accordian link.
问题是 Bootstrap 附加#according_name在a标签内。这会触发 AngularJS 路由，并且由于test.html每次单击手风琴链接时都会再次加载路由更改。
Your options are to try to configure $locationProviderto use HTML5 mode with hashbag if it works
如果可行，您的选择是尝试配置$locationProvider为使用带有 hashbag 的 HTML5 模式
$locationProvider.html5Mode(true).hashPrefix('!');
See some documentation here
在此处查看一些文档
Other would be to use angular-uicomponent but it has been not ported to support version 3 of bootstrap.
其他将使用angular-ui组件，但它尚未移植到支持版本 3 的引导程序。
回答by mfloryan
Actually, there might be a simpler solution.
实际上，可能有一个更简单的解决方案。
You can just make sure that the links don't propagate the URL change.
您只需确保链接不会传播 URL 更改。
Add to the atag onclick="return false;"
添加到a标签onclick="return false;"
回答by Sreekanth Karini
You can empty the href=""and use
您可以清空href=""并使用
data-target="#collapse"instead, this worked for me
data-target="#collapse"相反，这对我有用
i.e
IE
<a data-toggle="collapse" data-parent="#accordion" href=""
data-target="#collapse1">Collapsible Group 1</a>
回答by Matt E
I was having an issue using href and data-target together, so if you are using this in an application I'd recommend specifying one or the other but not both.
我在同时使用 href 和 data-target 时遇到问题，因此如果您在应用程序中使用它，我建议您指定其中之一，但不要同时指定两者。
When I used both, I'd get redirected to my login page as soon as I clicked on it. With one or the other specified it worked fine, but not with both.
当我同时使用两者时，我一点击它就会被重定向到我的登录页面。指定一个或另一个它工作正常，但不能同时使用。
