AngularJS ng-include

Question

I am facing problem below upon using the ng-inculde in angularJS. The bootstrap burger icon is not working. But if i'm not using the ng-include it works perfectly fine. Did I do something wrong?.

Is there any set-up first that I need to do before using the ng-include?.

Main html

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

Include 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>

Can you give more details about which part not working? You can't interact with it or something else? — Cuong Le Ngoc, Jul 15 '21 at 09:06
@CuongLeNgoc in the picture red box. Upon clicking the icon.. nothing happens. It's the bootstrap burger icon — KiRa, Jul 15 '21 at 09:11

score 1 · Answer 1 · answered Jul 15 '21 at 09:46

ng-include will:

Fetches, compiles and includes an external HTML fragment.

So that fragment added after page load and your events bind with js will not work on these dynamically added elements. To solve it, you can bind these events with onload arguments which is expression to evaluate when a new partial is loaded. Or you can try attach event to dynamic elements in javascript

score 0 · Answer 2 · answered Jul 10 '21 at 02:12

0

Please, remove the single quote.

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

answered Jul 10 '21 at 02:12

Thomson Mixab

657
4
8

still the same problem – KiRa Jul 10 '21 at 12:18

score 0 · Answer 3 · answered Jul 15 '21 at 05:59

0

It seems to be a tag closing issue.

You need to close the <header> tag at the end of Header.html

answered Jul 15 '21 at 05:59

Luis Vasquez

428
3
10

sorry I think I forgot to paste the closing tag for header. But in my code I have a closing tag – KiRa Jul 15 '21 at 06:16

score -1 · Answer 4 · answered Jul 07 '21 at 02:29

-1

use this :

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

answered Jul 07 '21 at 02:29

shangzhouwan

246
1
6

still the same problem – KiRa Jul 07 '21 at 02:34

AngularJS ng-include

4 Answers4