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?
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.
replace with
You only use src="" when using ng-include as an element:
When using ng-include as an attribute, you put the partial URL right in the attribute itself:
See https://docs.angularjs.org/api/ng/directive/ngInclude for the two use-cases.
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!After hours I resolved it for mine, it's all about using single quotes using between double quotes.