CODEWITHSUNDEEP
angularjsangularjs-ng-include
Aeon Williams
Aeon Williams

Reputation: 9

ng-include doesn't do anything

I'm trying to include some HTML on my software's webpage using ng-include, and I can't seem to get it to work. For now, I am using simplified versions of my end goals for testing purposes.

Relevant snippet of my project tree:

-web
--dragonweb
---src
----app
-----dragon
-------dragon.css
-------dragon.html
-------dragon.spec.ts
-------dragon.ts
-------test.html

dragon.html

<div ng-app = "" ng-controller="test">
    testing
    <div ng-include="" src="'app/src/dragon/test.html'"></div>
</div>

test.html

<div>
    This is an included file
</div>

Expected output on the web page:

testing

This is an included file.

Actual output on the web page:

testing

I've tried using different lengths of the path to test.html, with no luck. I've also been playing around with the use of the ng-controller tag, and syntax for the ng-include tag, with no luck. There are no console errors in the web page. Any idea why it doesn't seem to be working?

Backstory/disclaimer: I was the intern on this project before inheriting it after the lead dev suddenly left, this is my first time doing any sort of web development, and I'm just learning on the job from trial and error. So if I'm doing things wildly incorrect, I am absolutely all ears for how I can improve this process! I chose to try to use ng-include because we already have Angular implemented, and based on my research this seemed like the theoretically easiest way to accomplish what I wanted.

Upvotes: 0

Views: 1845

Answers (1)

nircraft
nircraft

Reputation: 8468

You need to pass the src to ng-include directive not the src attribute: Ex:

<div ng-include="'app/src/dragon/test.html'"></div>

or use relative path: 

<div ng-include="'./test.html'"></div>

Please check out the official documentation for details

Usage: as element:

<ng-include
  src="'string_url'">
...
</ng-include>

as attribute:

<ANY_ELEMENT_TAG
  ng-include="'string_url'">
...
</ANY_ELEMENT_TAG>

as CSS class:

<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>

Upvotes: 1

Related Questions