Menu
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).
514
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
Definition and Usage The ng-bind-html directive is a secure way of binding content to an HTML element. When you are letting AngularJS write HTML in your application, you should check the HTML for dangerous code.
The ng-app directive defines the root element of an AngularJS application and starts an AngularJS Application. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded. It is also used to load various AngularJS modules in AngularJS Application.
You have to single quote your src string inside of the double quotes:
<div ng-include src="'views/sidepanel.html'"></div> Source
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With