18

I have an angular app, and want to in a template, add other as divs. ng-include seemed like a perfect choice.

In main.html

<div id="page-wrapper">
<div ng-include src="'/partials/module.html'"></div>
</div>

In module.html

<div class="module">
<h1>Module</h1>
</div>

All files live in the partials-folder in the app.

When running this, at the place in the html code, I get <!-- ngInclude: -->, and substituting the divs in main.html with the also supported ng-include tag, it compiles to <!-- ngInclude: undefined -->.

Does anyone know what might be the problem?

gombos
  • 193
  • 1
  • 1
  • 5
  • 3
    Check network traffic, see where the HTTP request for `/partials/module.html` goes. It's probably not the correct path. It should be relative to the root of the app, and I'm guessing it isn't. – ivarni Jun 11 '14 at 10:06
  • can you post a jsfiddle of the code causing this issue? – CuriousMind Jun 11 '14 at 10:10
  • Check the path if you are running in localhost, try running localhost:8080/partials/module.html , this should show the proper html. – Vamshi Jun 11 '14 at 10:15
  • No HTTP request for `/partials/module.html`. My tree has root folder with app, js, sass and other things, and in app lies app.js, which routes to the template. The route to the template of `/` is `app/partials/main.html`, and the module.html file is also in the same folder. What would the relative path to the root then be? – gombos Jun 11 '14 at 10:22

5 Answers5

18

You only use src="" when using ng-include as an element:

<ng-include src="'/partial.html'"></ng-include>

When using ng-include as an attribute, you put the partial URL right in the attribute itself:

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

See https://docs.angularjs.org/api/ng/directive/ngInclude for the two use-cases.

Chad Robinson
  • 4,346
  • 19
  • 26
6

After hours I resolved it for mine, it's all about using single quotes using between double quotes.

<!--it will not work-->
<ng-include src="views/header.html"></ng-include>

<!--it will work :)-->
<!--Difference is single quotes along with double quotes around src string-->
<ng-include src="'views/header.html'"></ng-include>
Neeraj Bansal
  • 1,646
  • 12
  • 6
  • I don't know why you got downvoted but this solved my problem. Thank you. – reika Jul 22 '17 at 13:28
  • It doesn't need to be single quotes inside double quotes. It can be double quotes in single quotes. The salient point being that the inner quotes are part of the data, rather than being part of the markup. – Paul Rooney Sep 27 '18 at 03:24
0

I was facing the exact issue, compiler might not be finding the src path you provided. remove the first / in the path. compiler will automatically append / to the root context and tries to find the path. It worked for me.

<div ng-include src="'/partials/module.html'"></div>

replace with

<div ng-include src="'partials/module.html'"></div>
Aslam anwer
  • 686
  • 9
  • 17
0

I got stuck in the same issue, none of the solutions mentioned above helped me out to solve the problem and it ate my two whole days. Finally I figured out with the help of this link.

Also the solution to make this work requires below two traits:

  1. partial html should be included in single quotes
  2. secondly full path of the file needs to be mentioned even if the file is present in the same location.

eg: 

ABC
|
---- DEF
      |
      --- abc.html
      --- partial.html

So if abc.html has ng-include syntax then it should be like as below

<div ng-include="'ABC/DEF/partial.html'"></div>
                     OR
<ng-include src="'ABC/DEF/partial.html'"></ng-include>
Prashant Kumar
  • 168
  • 3
  • 15
-1

It must be a scope issue. Make sure the $scope object is passed properly and do not forget to include the controllers and services pertaining to the partial in your main page!

ryanyuyu
  • 5,999
  • 10
  • 46
  • 47
sangeetha k p
  • 11
  • 2