What is the correct syntax of ng-include?

javascript html angularjs syntax 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

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

matthias krull

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

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

Source

yes, this bit me the other day. Somewhat related answer stackoverflow.com/questions/13811948/…

The reason for this is that any string in ng tags is in fact evaluated as an angular expression. '' tells it that it's a string expression.

@Gepsens: it makes sense once you know. It would be nice if the documentation mentioned it explicity though.

I agree, we definitely need a documentation effort on Angular, and a layout system.

Seriously. ridiculous. You'd think they'd mention that its an expression, despite how obvious it seems.

Kalpesh Prajapati

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

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

    <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

The ng-include="'...'" syntax definitely looks better.

so I'm assuming ng-include doesn't exist in comment format?

Benjamin McFerren

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' ">

Actually, this is not exactly correct: the path CAN be relative, but it is relative to the html file from which the app was instantiated. In your "incorrect" example, that would work if add-more.html was in the same directory as app.html. In my answer, views/ is in the same directory as app.html.

In the case with Laravel and placing the structure in the public folder (public/app/templates/includes) and the calling file is (public/app/templates/index.php) the include path needed to be (app/templates/includes/filetoinclude.php). I could not get relative to work.

Balance

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>

this is years later, but this was precisely what I needed for working in a <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Thanks!

BGBRUNO

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>

GG.

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>

You should not combine ng-view and ng-inclue on the same element; the src (see templateUrl) should be configured in your router.

@jacob so how would you load this as a route?? because i can get my view to load, and i can get my controller to trigger, but they're not connected, view loads empty

@SonicSoul use ngRouter and set it as the template. Or if you mean use route params in the path, just use it like a JavaScript expression: someVar + 'some string'

@jacob i already use ngRouter but i don't know how to load that route in ng-include .. if i use a route in src= it just loads entire site not just the view :( if i load it by relative path to html, it does not load the controller with the view

@SonicSoul are you trying to load a template nested in a view that is loading via ngRouter? If so, I think the value you provide to src should be an absolute path in your project's directory structure (not an app route). If you're trying to set the route template using ngInclude, that's wrong. Beyond that, this was 6 years ago, and I haven't used AngularJS in probably 3+ years.

jayaweb

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>

Rohit Parte

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>

What is the correct syntax of ng-include?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US