What is the correct syntax of ng-include?
JavascriptHtmlAngularjsSyntaxIncludeJavascript Problem Overview
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).
Javascript Solutions
Solution 1 - Javascript
You have to single quote your src string inside of the double quotes:
<div ng-include src="'views/sidepanel.html'"></div>
https://groups.google.com/d/msg/angular/PNK5_uvm1v8/3nXLipPzWvMJ">Source</a>
Solution 2 - Javascript
<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 - Javascript
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 - Javascript
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 - Javascript
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 - Javascript
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>
Solution 7 - Javascript
try this
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
Solution 8 - Javascript
On ng-build, file not found(404) error occur. So we can use below code
<ng-include src="'views/transaction/test.html'"></ng-include>
insted of,
<div ng-include="'views/transaction/test.html'"></div>