What is the correct syntax of ng-include?

What is the correct syntax of ng-include?

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

But in the official docs, it says to use

But then down the page it is shown as

Regardless, I tried

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:

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:






Blah



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).

Solutions/Answers:

Solution 1:

You have to single quote your src string inside of the double quotes:

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

Source

Solution 2:

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

OR

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

OR

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

Points To Remember:

–> No spaces in src

–> Remember to use single quotation in double quotation for src

Solution 3:

For those trouble shooting, it is important to know that ng-include requires the url path to be from the app root directory and not from the same directory where the partial.html lives. (whereas partial.html is the view file that the inline ng-include markup tag can be found).

For example:

Correct:
div ng-include src=” ‘/views/partials/tabSlides/add-more.html’ “>

Incorrect:
div ng-include src=” ‘add-more.html’ “>

Solution 4:

For those who are looking for the shortest possible “item renderer” solution from a partial, so a combo of ng-repeat and ng-include:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />

Actually, if you use it like this for one repeater, it will work, but won’t for 2 of them!
Angular (v1.2.16) will freak out for some reason if you have 2 of these one after another, so it is safer to close the div the pre-xhtml way:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

Solution 5:

Maybe this will help for beginners

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <div ng-include src="'view/01.html'"></div>
    <div ng-include src="'view/02.html'"></div>
    <script src="angular.min.js"></script>
  </body>
</html>

Solution 6:

This worked for me:

ng-include src="'views/templates/drivingskills.html'"

complete div:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>