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，那意味着只有Angular应用程序初始化指令才会将HTML内容呈现到DOM。之后，只有bootstrap.min.js可以在DOM中看到呈现的菜单HTML。因此，您需要在bootstrap.min.js代码后添加angular。否则它就不会看到HTML。

因此，请确保按照以下顺序添加js

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

为什么ng-include会破坏我的崩溃菜单？

1 个答案: