0

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

Community
  • 1
  • 1
Salman Raza
  • 320
  • 1
  • 8
  • 23
  • Where have you used Angular UI Bootstrap? You seem to have declared your own directive. Also, improve your question - describe "does not work". – callmekatootie Apr 02 '14 at 13:39

1 Answers1

2

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.

jnthnjns
  • 8,962
  • 4
  • 42
  • 65
mainguy
  • 8,283
  • 2
  • 31
  • 40
  • +1 This is absolutely correct, I was just about to post this exact resolution. The anchor tag is changing the path which you can see by watching `$locationChangeSuccess`, thus making `ngRoute` think that you are on a different page. – jnthnjns Apr 02 '14 at 14:01
  • I tried this but it is not working, I am using angularui bootstrap directive. and my html files are in different folder. When I put accordion code in my root file it works fine, but when i put the same code in my other folder /view/partials/test.html it does not work and no error shows in the console. – Salman Raza Apr 03 '14 at 07:11
  • You want to include the js code for accordion in your partial html file, so that it's loaded and unloaded when the view changes? Or you want to have something like accordion_directive.js that is just located in a subfolder? – mainguy Apr 03 '14 at 08:24
  • I think there is a confusion, let me clear it in a better way. I am using angular-ui bootstrap accordion (http://angular-ui.github.io/bootstrap/#/accordion) . It gives a .js file in which all the directives are pre-defined and it gives a template folder with html files. So when I load all the files and call that direct from root file it works but it fails to work if I call that same directive some where from the subfolder. I hope this makes sense. – Salman Raza Apr 03 '14 at 09:11
  • Can you use something like firebugs console or network statistics to find out if something is not loaded/found? Maybe the templates are not found? It's hard to tell with not knowing anything about your folder layout, a complete misleading example and a badly formulated question. – mainguy Apr 03 '14 at 09:24
  • Every thing is loading fine. It's just not binding it – Salman Raza Apr 03 '14 at 09:27
  • Sorry, i'm out of here, I don't have the slightest idea what your issue is. Maybe this answer might help you further on your way: http://stackoverflow.com/questions/17660947/can-you-override-specific-templates-in-angularui-bootstrap/17677437#17677437. Good Luck:-) – mainguy Apr 03 '14 at 10:07