CODEWITHSUNDEEP
angularjsangularjs-ng-include
gombos
gombos

Reputation: 193

ng-include compiles to a comment

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?

Upvotes: 18

Views: 13928

Answers (5)

Prashant Kumar
Prashant Kumar

Reputation: 416

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>

Upvotes: 0

Aslam a
Aslam a

Reputation: 759

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>

Upvotes: 0

Neeraj Bansal
Neeraj Bansal

Reputation: 2826

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>

Upvotes: 6

sangeetha k p
sangeetha k p

Reputation: 11

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!

Upvotes: -1

Chad Robinson
Chad Robinson

Reputation: 4623

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.

Upvotes: 18

Related Questions