带有bootstrap 3手风琴的AngularJS在通过ng-view包含时无法正常工作

时间:2013-09-14 16:37:27

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

问题如下:一旦我在ng-view指令中加载的视图中使用手风琴,手风琴标题点击就不再正常工作

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

如果手风琴在页面中使用且没有ng-view,手风琴将完美地运作

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

我遗失的任何线索?

4 个答案:

答案 0 :(得分:36)

实际上,可能有一个更简单的解决方案。

您可以确保链接不会传播URL更改。

添加到a代码onclick="return false;"

答案 1 :(得分:16)

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

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

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

答案 2 :(得分:7)

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

您的选择是尝试将$locationProvider配置为使用带有hashbag的HTML5模式(如果有效)

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

查看一些文档here

其他方法是使用angular-ui组件,但它没有移植到支持bootstrap的第3版。

答案 3 :(得分:0)

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

当我同时使用它们时,我会在点击它后立即重定向到我的登录页面。使用一个或另一个指定它工作正常,但两者都没有。