AngularJS-UI accordion directive not working with

问题:

I am trying to integrate Angular-ui bootstrap accordion in my application. It works fine if I put it without ng-view but if I put the accordion in some other html file and loads with ng-view via ng-route provider the accordion fails to work

I referred this link but no help for me with this solution AngularJS with bootstrap 3 accordion not working when included via ng-view

Here is the plunker link. If anyone can give a fix on this plunker?

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

Thanks

回答1:

In fact the given answers in your reffered answer are right. This is simply related to the A tag in your template which has a default action you don't want to fire.

Change your template like this:

template:
    '<div class="panel panel-default">'+
    '   <div class="panel-heading">'+
    '       <h4 class="panel-title"><span  data-toggle="collapse" class="accordion-toggle">{{title}}</span></h4>'+
    '   </div>'+
    '   <div class="panel-collapse collapse">'+
    '       <div class="panel-body" ng-transclude>'+
    '       </div>'+
    '   </div>'+
    '</div>',

and use a span, a label or a button instead of an A. An everything works.

See this forked Plunker.

You cann now use some additional css to achieve some hover effect.