AngularJS with bootstrap 3 accordion not working when included via ng-view

Asked 14/9, 2013 at 16:37 Answered 19/11, 2016 at 8:2

Solved javascript angularjs accordion angularjs-directive twitter-bootstrap-3

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

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

If the accordion is use in the page itself with no ng-view, the accordion works perfectly

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

Any clue to what Im missing?

Charisecharisma answered 14/9, 2013 at 16:37 Comment(0)

The problem is that Bootstrap appends #according_name within a a tag. This triggers a AngularJS routing and due to route change test.html is loaded again on every click on accordian link.

Your options are to try to configure $locationProvider to use HTML5 mode with hashbag if it works

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

See some documentation here

Other would be to use angular-ui component but it has been not ported to support version 3 of bootstrap.

Desiderative answered 14/9, 2013 at 17:51 Comment(3)

Hey, I changed the .html5Mode to false and now it works! thanks :) – Charisecharisma 14/9, 2013 at 20:14

Looks like the documentation that you added is no longer available. Could you add another link? – Finished 14/10, 2015 at 13:51

@CodedContainer please check now. – Desiderative 14/10, 2015 at 14:28

Actually, there might be a simpler solution.

You can just make sure that the links don't propagate the URL change.

Add to the a tag onclick="return false;"

Betteanne answered 10/2, 2014 at 22:42 Comment(2)

This worked for me. It might not be the best practice but I've been stuck with this for a few hours now. Thanks @mfloryan! – Rattlepate 25/12, 2014 at 0:29

You just solved what I've been struggling on for hours. Thank you! Good catch. – Taxdeductible 12/9, 2015 at 14:56

You can empty the href="" and use

data-target="#collapse" instead, this worked for me

i.e

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

Hunfredo answered 19/2, 2016 at 12:59 Comment(3)

+10 if a could. This should be the accepted answer! Non-intrusive in general app config as html5Mode and a good practice using the same attribute for others similar components – Anse 26/5, 2016 at 16:44

After trying lots of things, this was the solution for me! – Fishy 10/10, 2016 at 20:36

+1 This helped me a lot, I was getting weird behavior with my accordion even after switching into html5 mode (and rewriting my expressJS urls) -- adding data-target and emptying my href remedied all the odd accordion behavior -- thank you greatly! – Lath 25/3, 2017 at 21:24

The problem is that Bootstrap appends #according_name within a a tag. This triggers a AngularJS routing and due to route change test.html is loaded again on every click on accordian link.

Your options are to try to configure $locationProvider to use HTML5 mode with hashbag if it works

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

See some documentation here

Other would be to use angular-ui component but it has been not ported to support version 3 of bootstrap.

Desiderative answered 14/9, 2013 at 17:51 Comment(3)

Hey, I changed the .html5Mode to false and now it works! thanks :) – Charisecharisma 14/9, 2013 at 20:14

Looks like the documentation that you added is no longer available. Could you add another link? – Finished 14/10, 2015 at 13:51

@CodedContainer please check now. – Desiderative 14/10, 2015 at 14:28

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.

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.

Iglesias answered 19/11, 2016 at 8:2 Comment(0)

Recommended topics

Hot tags