0

So, my question deals with why my drop down is not working for my navigation bar. It works when all the HTML is in one document but not when I'm using ng-include. I'm not using Bootstrap but MetroUI-CSS.

index.html

<div id="container">
    <div id="header" ng-include="'app/templates/header.html'"></div><!-- End header container -->
</div>

partial/header.html

<div id="site_nav_bar">
    <nav class="navigation-bar dark fixed-top shadow">
        <nav class="navigation-bar-content">
            <item class="element"><i class="icon-keyboard" style="padding-right: 1em"></i> <a href="index.html">Home</a></item>
            <item class="element-divider"></item>
            <item class="element"><a href="#/about.html">About</a></item>
            <item class="element"><a href="#/contact.html">Contact</a></item>

            <ul class="element-menu">
                <li>
                    <a class="dropdown-toggle" href="#">Blogs</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li>
                            <a href="#" class="dropdown-toggle">Programming Blogs</a>
...
                        </li>

So basically, when I click on Blogs it does not drop down the menu.

pmac89
  • 418
  • 1
  • 6
  • 23
  • For operations on DOM elements AngularJS uses directives. To understand the difference take a look at this great answer: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background – Dmitry Evseev Oct 29 '14 at 20:35

1 Answers1

0

Bootstrap evaluates the DOM only when it's ready (ready event), therefore if your dropdown exists at this point, it would work, otherwise if it will be added to the DOM later on (using ng-include for instance) it won't.

Behind the scenes ng-include manipulates the DOM for you and performs an AJAX request to retrieve the HTML you want to include. bootstrap is not aware of that and won't wait for the DOM to be updated.

to avoid that use bootstrap-ui

Asaf David
  • 416
  • 3
  • 7
  • Hm, I think this has helped but I think it has to do with my partial of header.html. – pmac89 Oct 29 '14 at 20:32
  • Of course it is, that's what I said. it's not the content of the file but how you load it. Anyway bootstrap js was not designed to work with AngularJS. – Asaf David Oct 29 '14 at 20:36
  • Ya, I think this here tells me how to fix it: https://github.com/olton/Metro-UI-CSS/issues/325 – pmac89 Oct 29 '14 at 20:38
  • Instead or writing this patch, why not using a library that was designed to integrate AngularJS and Bootstrap? It's written in pure AngularJS (no jQuery is needed) but still works with the same CSS and therefor you won't have to change your layout. see the examples here: http://angular-ui.github.io/bootstrap/#/dropdown I think it's a better solution for you. – Asaf David Oct 29 '14 at 20:42
  • I've tried adding in the bootstrap via the way it tells me to but it still doesn't work. – pmac89 Oct 29 '14 at 21:11
  • can you please share your code ? It should work if you use it properly – Asaf David Oct 29 '14 at 22:14