AngularJS ng-include答案

【问题标题】：AngularJS ng-includeAngularJS ng-include
【发布时间】：2021-09-17 14:19:54
【问题描述】：

在 angularJS 中使用 ng-inculde 时，我遇到了以下问题。引导汉堡图标不起作用。但如果我不使用ng-include，它工作得非常好。我是不是做错了什么。

在使用ng-include 之前我需要先做任何设置吗？

主 html

...
<body>
<ng-include src="'../Content/Shared/Header.html'"></ng-include>
<ng-view></ng-view>
</body>
....

包含 html

<header>
<div class="container">
    <div class="row element-holder">
        <div class="col-md-2 col-sm-4 col-12">
            <a href="../main/index.html" class="text-logo-holder">
                <span class="text">My Project</span>
            </a>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <form ng-submit="searchProducts()" class="search-holder">
                <input type="text" class="form-control" placeholder="Search Collection...." list="_items" ng-model="searchText" ng-keyup="searchItemNames()" autocomplete="off" />
                <datalist id="_items">
                    <option ng-repeat="result in results" value="{{result}}">{{result}}</option>
                </datalist>
                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
            </form>

        </div>
        <div class="col-md-6 col-sm-2 col-12">
            <nav class="navbar navbar-expand-lg float-right">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <img src="../Content/dist/images/icon-header-menu.png" />
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Discover</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Help</a>
                        </li>
                        <li class="nav-item btn-nav-item">
                            <a class="nav-link" href="" ng-click="logout()" ng-show="isSignedIn">Logout</a>
                            <a class="nav-link" href="" ng-click="signin()" ng-show="!isSignedIn">Sign In</a>
                        </li>
                        <li class="nav-item">
                            <a id="menu-link" class="nav-link" href="#">
                                <img src="../Content/dist/images/icon-header-menu.png" />
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="mobile-nav  float-right">
                <a id="menu-link-mobile" class="nav-link" href="#">
                    <img src="../Content/dist/images/icon-header-menu.png" />
                </a>
            </div>
        </div>
    </div>
</div>

<div id="sidebar-menu" class="side-menu-content">
    <a href="#" id="menu-close" class="menu-close">&nbsp; </a>
    <ul class="menu-holder">
        <li>
            <a href="#" class="menu-item row">
                <div class="col-3 icon-holder">
                    <img src="../Content/dist/images/icon-inbox.png" />
                </div>
                <div class="col-9">
                    Inbox
                </div>
            </a>
        </li>
      
        <li>
            <a href="#" class="menu-item row">
                <div class="col-3 icon-holder">
                    <img src="../Content/dist/images/icon-purchase.png" />
                </div>
                <div class="col-9">
                    Purchases
                </div>
            </a>
        </li>
    </ul>

    <div class="button-holder row">
        <div class="col-6 pl-default pr-default" ng-show="!isSignedIn">
            <input type="submit" class="btn btn-primary" value="Login/Sign Up" ng-click="signin()" />
        </div>
        <div class="col-6 pl-default pr-default" ng-show="isSignedIn">
            <input type="submit" class="btn btn-secondary" value="Logout" ng-click="logout()" />
        </div>
        <div class="col-6 pl-default pr-default">
            <input type="submit" class="btn btn-primary" value="Change Password" />
        </div>
    </div>
</div>

【问题讨论】：

您能否详细说明哪个部分不起作用？你不能与它或其他东西交互吗？
@CuongLeNgoc 在图片红框中。单击图标后..没有任何反应。这是引导汉堡图标
你用js绑定事件吗？
是的..如果我不使用ng-include，它的工作原理
你能展示一下那个js部分吗？

标签： angularjs twitter-bootstrap

【解决方案1】：

ng-include 将：

获取、编译并包含一个外部 HTML 片段。

因此，页面加载后添加的片段以及与 js 绑定的事件将不适用于这些动态添加的元素。为了解决这个问题，您可以将这些事件与onload 参数绑定，这是在加载新部分时评估的表达式。或者你可以试试attach event to dynamic elements in javascript

【讨论】：

【解决方案2】：

请去掉单引号。

<div ng-include="../Content/Shared/Header.html"></div>

【讨论】：

还是同样的问题

【解决方案3】：

这似乎是一个标签关闭问题。

您需要关闭 Header.html

末尾的
标签

【讨论】：

对不起，我想我忘了粘贴标题的结束标签。但在我的代码中，我有一个结束标签

【解决方案4】：

使用这个：

<div ng-include src="'../Content/Shared/Header.html'"></div>

【讨论】：

还是同样的问题