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).
You have to single quote your
srcstring inside of the double quotes:Source