为什么ng-include会破坏我的折叠菜单？

Question

I recently bought a template to start pulling an application I am building into it. The navigation will have a lot of dynamic menus based on the user's roles so I would like to keep it in a separate file and pull it in versus putting it on every page and updating each one. When I do use ng-include, it seems like Jquery breaks or bootstrap.min.js doesn't recognize the menus.

<div ng-include="'/partials/structure/navigation.html'"></div>

When I do the above it pulls in the navigation, just the mobile menu of it's not clickable. No errors in the console either. On a full view, the menus are there and all the dropdowns work. When I don't use ng-include both full menu and mobile menu function as you would expect. So it seems like something with jQuery, but I am stumped where to look for this and Google didn't yield much to go off of.

                    <div class="menu-extras topbar-custom">

                     <ul class="list-inline float-right mb-0">

                        <li class="menu-item list-inline-item">
                            <!-- Mobile menu toggle-->
                            <a class="navbar-toggle nav-link">
                                <div class="lines">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </a>
                            <!-- End mobile menu toggle-->
                        </li> 
                        <!-- Removed code to shorten things for you guys -->
                      </ul>
                    </div>
                <!-- end menu-extras -->

Shortening this up as well.

            <div class="navbar-custom">
            <div class="container-fluid">
                <div id="navigation">
                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="index.html"><i class="ti-home"></i>Dashboard</a>
                        </li>

                        <li class="has-submenu">
                            <a href="#"><i class="ti-paint-bucket"></i>UI Kit</a>
                            <ul class="submenu">
                                <li><a href="ui-buttons.html">Buttons</a></li>
                                <li><a href="ui-cards.html">Cards</a></li>
                                <li><a href="ui-portlets.html">Portlets</a></li>
                                <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                <li><a href="ui-tabs.html">Tabs & Accordions</a></li>
                                <li><a href="ui-modals.html">Modals</a></li>
                                <li><a href="ui-progressbars.html">Progress Bars</a></li>
                                <li><a href="ui-notification.html">Notification</a></li>
                                <li><a href="ui-bootstrap.html">BS Elements</a></li>
                                <li><a href="ui-typography.html">Typography</a></li>
                            </ul>
                        </li>
                   </ul>
              </div>

Here is how I include everything before the tag.

        <!-- jQuery  -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script><!-- Popper for Bootstrap --><!-- Tether for Bootstrap -->
    <script src="../js/waves.js"></script>
    <script src="../js/jquery.slimscroll.js"></script>
    <script src="../js/jquery.scrollTo.min.js"></script>

    <!-- App js -->
    <script src="../js/jquery.core.js"></script>
    <script src="../js/jquery.app.js"></script>

    <!-- Angular -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>

    <!-- Controllers -->
    <script src="../js/controllers/main.js"></script>

    <!-- Bootstrap Javascript -->
    <script src="../js/bootstrap.min.js"></script>

Answer 1

If you include ng-include it means after only the Angular application initialization directive will render the HTML content into the DOM . After that only the bootstrap.min.js can see the rendered menu HTML inside DOM. Therefore you need to add bootstrap.min.js after the angular code. Otherwise it won't see the HTML.

Therefore make sure you include js in following order

jquery.js
angular.js
angular application js code
bootstrap.min.js