gpt4 book ai didi

AngularJS ng-include

转载 作者:行者123 更新时间:2023-12-04 11:39:14 25 4
gpt4 key购买 nike

我在使用 ng-inculde 时遇到以下问题在 AngularJS 中。 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>

最佳答案

ng-include将要:

Fetches, compiles and includes an external HTML fragment.


因此,在页面加载后添加的片段以及与 js 绑定(bind)的事件将不适用于这些动态添加的元素。要解决它,您可以将这些事件与 onload 绑定(bind)。 arguments 是在加载新部分时评估的表达式。或者你可以试试 attach event to dynamic elements in javascript

关于AngularJS ng-include,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68279213/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com