logo标签列表

AngularJS ng-include

angularjstwitter-bootstrap
5
我在使用AngularJS的ng-include时遇到了以下问题。Bootstrap汉堡图标无法正常工作。但是如果我不使用ng-include，它就可以完美地工作。我做错了什么吗？
在使用ng-include之前，是否需要进行任何设置？

enter image description here

主要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>
你能提供更多关于哪个部分不工作的细节吗？你无法与它交互还是其他什么问题？ - Cuong Le Ngoc
在图片的红色框中是@CuongLeNgoc。单击图标时，什么也不会发生。这是Bootstrap汉堡图标。 - KiRa
你用js绑定事件吗？ - Cuong Le Ngoc
是的，如果我不使用 ng-include，它是有效的。 - KiRa
你能展示一下那个JS部分吗？ - Cuong Le Ngoc
4个回答
1

ng-include将会：

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

因此，这些动态添加的元素在页面加载后无法与js绑定事件。为了解决这个问题，您可以使用onload参数来绑定这些事件，该参数是一个表达式，在加载新的部分时进行评估。或者您可以尝试在javascript中将事件附加到动态元素

0
请移除单引号。
<div ng-include="../Content/Shared/Header.html"></div>
仍然存在相同的问题。 - KiRa
0

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

您需要在 Header.html 的结尾处关闭 <header> 标签。

抱歉，我想我忘记了头部的闭合标签。但是在我的代码中，我有一个闭合标签。 - KiRa
-1
使用这个：
<div ng-include src="'../Content/Shared/Header.html'"></div>
仍然是同样的问题。 - KiRa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接