使用引导程序崩溃与angularjs

我正在尝试在我的angular度应用程序中包含下面的bootstrap可折叠面板。 然而，当我点击“展开”，angular似乎看到href="#collapseOne" ，然后redirect到主页而不是折叠面板。 我的路由看起来像这样，我认为otherwise({redirectTo: '/home'}); 正在造成这个问题。 有什么build议么？

 angular.module('App') .config(['$routeProvider', function($routeProvider) { $routeProvider. when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}). when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}). when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}). otherwise({redirectTo: '/home'}); }]); 

面板 –

 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Expand </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> ... </div> </div> </div> </div> 

Answer 1

就像在类似的问题中提到的那样，只需要通过data-target属性来改变你的href

 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> Expand </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> ... </div> </div> </div> </div> 

Answer 2

您可以使用AngularJS UI Bootstrap中的accordion指令，该指令构build在twitter引导崩溃指令之上。

例：

  <accordion > <accordion-group heading="Static Header, initially expanded" is-open="true"> This content is straight in the template. </accordion-group> </accordion> 

现场示例： http : //jsfiddle.net/choroshin/U89bW/3/

Answer 3

我有同样的问题，我不想在引导之外添加额外的库。 按照build议，您可以使用data-target="#your-collapsing-element" ，完全删除href属性。

基础

要使面板崩溃，您需要：

1. 在用于触发崩溃的元素上：

    data-toggle="collapse" data-target="#my-collapsing-element" 

2. 关于崩溃的因素：

    id="my-collapsing-element" 

3. 在包装“trigger”元素和collapsing元素的元素上：

    class="panel" 

把它放在一起

您可以select添加父元素使其成为一个组的一部分，并添加CSS类“ collapse in ”到collapsing元素使其默认状态closures。 一个完整的例子：

 <div id="accordion"> <div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1"> Heading 1 </a> <div id="collapse1"> Content for panel 1 </div> </div> <div class="panel"> <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2"> Heading 2 </a> <div id="collapse2" class="collapse in"> Content for panel 2 </div> </div> </div> 

您可以通过使用<button>元素而不是<a>来获得更好的button行为。 重写引导程序的样式为.panel可以通过添加自己的panel CSS类的样式。

<div class="panel its-my-panel">

 .panel.its-my-panel { margin-bottom: 0; background-color: transparent; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } 

 .my-panel-heading { cursor: pointer; } /* Overrides for .panel--theonly required bootstrap class */ .panel.my-panel-overrides { margin-bottom: 0; background-color: transparent; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } 

 <link href="bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div id="accordion"> <div class="panel my-panel-overrides"> <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1"> Collapsible Group 1</a> <div id="collapse1" class="collapse in"> Content for panel 1 </div> </div> <div class="panel my-panel-overrides"> <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2"> Collapsible Group 2</a> <div id="collapse2" class="collapse"> Content for panel 2 </div> </div> <div class="panel my-panel-overrides"> <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3"> Collapsible Group 3</a> <div id="collapse3" class="collapse"> Content for panel 3 </div> </div> </div> 

Answer 4

1. 更改所有的href以便展开到data-target 。
2. 要展开和折叠的div data-target和id不应包含连字符。