angularjsangularjs-ng-include

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?

Solution

  • 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.