Intellipaat Back

Explore Courses Blog Tutorials Interview Questions

What is the correct syntax of ng-include?

0 votes
2 views
in Web Technology by (47.6k points)

I’m trying to include an HTML snippet inside of an ng-repeat, but I can’t get the include to work. It seems the current syntax of ng-include is different than what it was previously: I see many examples using

<div ng-include src="path/file.html"></div>

But in the official docs, it says to use

<div ng-include="path/file.html"></div>

But then down the page, it is shown as

<div ng-include src="path/file.html"></div>

Regardless, I tried

<div ng-include="views/sidepanel.html"></div>

<div ng-include src="views/sidepanel.html"></div>

<ng-include src="views/sidepanel.html"></ng-include>

<ng-include="views/sidepanel.html"></ng-include>

<ng:include src="views/sidepanel.html"></ng:include>

My snippet is not very much code, but it’s got a lot going on; I read in Dynamically load template inside ng-repeat that that could cause a problem, so I replaced the content of sidepanel.html with just the word foo, and still nothing.

I also tried declaring the template directly in the page like this:

<script type="text/ng-template" id="tmpl"> foo </script>

And running through all the variations of ng-include referencing the script’s id, and still nothing.

My page had a lot more in it, but now I’ve stripped it down to just this:

<!-- index.html-->

<html> 

<head>

<!-- angular includes-->

</head>

<body ng-view="views/main.html"> 

<!-- view is actually set in the router --> 

<!-- views/main.html --> 

<header> 

<h2>Blah</h2> 

</header> 

<article id="sidepanel"> 

<section class="panel"> 

<!-- will have ng-repeat="panel in panels" --> 

<div ng-include src="views/sidepanel.html"></div>

</section>

</article>

<!-- index.html-->

</body>

</html>

The header renders, but then my template doesn’t. I get no errors in the console or from Node, and if I click the link in src="views/sidepanel.html" in dev tools, it takes me to my template (and displays foo).

1 Answer

0 votes
by (106k points)

The correct syntax of ng-include is to add the single quote in your src string inside the double quotes:

See the example below:-

<div ng-include src="'views/sidepanel.html'"></div>

Related questions

+2 votes
1 answer
Working with select using AngularJS's ng-options
asked Aug 19, 2019 in Web Technology by Sammy (47.6k points)
+2 votes
1 answer
Can one AngularJS controller call another?
asked Aug 17, 2019 in Web Technology by Sammy (47.6k points)
0 votes
1 answer
How to display length of filtered ng-repeat data
asked Aug 19, 2019 in Web Technology by Sammy (47.6k points)

Browse Categories

© COPYRIGHT 2011-2024 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...