Hover Dropdown JS does not work with my Angular JS Setup

Question

I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.

<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container"> 
<div class="row" >
    <div ui-view autoscroll="false"></div>
</div>

<footer ng-include="'templates/footer.html'"></footer>

and the plugin is called before the tag with the rest of scripts needed.

It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.

Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.

Thanks,

Gerd

gerdtf · Accepted Answer · 2014-06-18 14:04:08Z

0

Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.

answered Jun 18, 2014 at 14:04

gerdtf

7051 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3141592 Over a year ago

Can you be more specific in your answer? <script> tags within a template cause the error mentioned in stackoverflow.com/questions/30331529/… So, how did you load the hover dropdown js?

Community · Accepted Answer · 2017-05-23 12:22:02Z

0

I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)

So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:

$('.dropdown-toggle').dropdownHover(options);

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 3, 2015 at 16:44

user3141592

1,1302 gold badges10 silver badges23 bronze badges

Collectives™ on Stack Overflow

Hover Dropdown JS does not work with my Angular JS Setup

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related