爲什麼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