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

Question

我最近买了一个模板开始拉我正在建设的应用程序。导航将有很多基于用户角色的动态菜单，所以我想将它保存在一个单独的文件中，然后将其放在每个页面上并更新每个页面。当我使用ng-include时，看起来像Jquery中断或bootstrap.min.js不能识别菜单。

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

当我这样做时，它会拉动导航，只是它的移动菜单是不可点击的。在控制台中也没有错误。在全景视图中，菜单在那里，所有的下拉菜单都可以工作。当我不使用ng时，就像您所期望的那样包含完整菜单和移动菜单功能。所以它看起来像jQuery的东西，但我很难在哪里寻找这个，谷歌并没有太大的收获。

    <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 --> 

也缩短了这一点。

  <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> 

这里是我如何在标签之前包含所有内容。

 <!-- 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

如果包含ng-include这意味着仅将角应用程序初始化指令将使HTML内容到DOM。之后，只有bootstrap.min.js可以看到DOM内的渲染菜单HTML。因此，您需要在angular代码之后添加bootstrap.min.js。否则它不会看到HTML。

因此请确保您有js按照以下顺序

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