All we need is an easy explanation of the problem, so here it is.
I have an angular app, and want to in a template, add other as divs. ng-include seemed like a perfect choice.
<div id="page-wrapper"> <div ng-include src="'/partials/module.html'"></div> </div>
<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?
How to solve :
I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.
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.
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>
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>
<div ng-include src="'partials/module.html'"></div>
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:
- partial html should be included in single quotes
- secondly full path of the file needs to be mentioned even if the file is present in the same location.
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>
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!
Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂