AngularJS ng-包括

Question

在angularJS中使用angularJS时，我将面临以下问题。自助汉堡图标不起作用。但是，如果我不使用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>

Answer 1

ng-包括将：

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

因此，在页面加载后添加的片段和事件绑定到js将无法处理这些动态添加的元素。要解决这个问题，可以使用onload参数绑定这些事件，这是在加载新的部分时要计算的表达式。或者你可以试试将事件附加到javascript中的动态元素

Answer 2

请删除单引号。

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

Answer 3

这似乎是一个标签结束语。

您需要关闭标记在Header.html的末尾。