Was ist die korrekte Syntax von ng-include?

398

Ich versuche, ein HTML-Snippet in ein einzuschließen ng-repeat, aber ich kann das Include nicht zum Laufen bringen. Es scheint, dass die aktuelle Syntax von ng-includeanders ist als zuvor: Ich sehe viele Beispiele mit

<div ng-include src="path/file.html"></div>

Aber in den offiziellen Dokumenten heißt es zu verwenden

<div ng-include="path/file.html"></div>

Aber dann auf der Seite wird es als angezeigt

<div ng-include src="path/file.html"></div>

Egal, ich habe es versucht

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

Mein Snippet ist nicht sehr viel Code, aber es ist viel los; Ich habe in der Vorlage "Dynamisch laden"ng-repeat gelesen , dass dies ein Problem verursachen könnte. Deshalb habe ich den Inhalt von sidepanel.htmlnur durch das Wort foound immer noch durch nichts ersetzt.

Ich habe auch versucht, die Vorlage direkt auf der Seite wie folgt zu deklarieren:

<script type="text/ng-template" id="tmpl">
    foo
</script>

Und alle Variationen der ng-includeReferenzierung des Skripts durchgehen idund immer noch nichts.

Meine Seite enthielt viel mehr, aber jetzt habe ich sie auf genau das reduziert:

<!-- 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>

Der Header wird gerendert, meine Vorlage jedoch nicht. Ich erhalte keine Fehler in der Konsole oder vom Knoten. Wenn ich in den Entwicklertools auf den Link klicke, komme src="views/sidepanel.html"ich zu meiner Vorlage (und den Anzeigen foo).

javascript html include angularjs repeater Jacob
quelle

Antworten:

775

Sie müssen Ihre srcZeichenfolge innerhalb der doppelten Anführungszeichen in einfache Anführungszeichen setzen:

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

Quelle

Jacob
quelle
4
Ja, das hat mich neulich gebissen. Etwas verwandte Antwort stackoverflow.com/questions/13811948/…
jaime
60
Der Grund dafür ist, dass jede Zeichenfolge in ng-Tags tatsächlich als Winkelausdruck ausgewertet wird. '' sagt es, dass es ein String-Ausdruck ist.
Gepsens
37
@ Gepsens: Es macht Sinn, wenn Sie es wissen. Es wäre schön, wenn die Dokumentation dies explizit erwähnen würde.
Jacob
1
Ja, jetzt weiß ich, warum sie "string" sagen ... Danke + jacob für den Fund
Shadoweb
7
Ich stimme zu, wir brauchen definitiv einen Dokumentationsaufwand für Angular und ein Layoutsystem.
Gepsens
134 
    <ng-include src="'views/sidepanel.html'"></ng-include>

ODER

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

ODER

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

Punkte, die man sich merken sollte:

-> Keine Leerzeichen in src

-> Denken Sie daran, für src ein einfaches Anführungszeichen in einem doppelten Anführungszeichen zu verwenden

Kalpesh Prajapati
quelle
8
Die ng-include="'...'"Syntax sieht definitiv besser aus.
Pier-Luc Gendreau
Ich gehe also davon aus, dass ng-include nicht im Kommentarformat vorhanden ist.
OzzyTheGiant
50

Für diese Fehlerbehebung ist es wichtig zu wissen, dass ng-include erfordert, dass der URL-Pfad aus dem App-Stammverzeichnis stammt und nicht aus demselben Verzeichnis, in dem sich die partielle.html befindet. (Während teilweise.html die Ansichtsdatei ist, in der sich das Inline-Markup-Tag ng-include befindet).

Zum Beispiel:

Richtig: div ng-include src = "'/views/partials/tabSlides/add-more.html'">

Falsch: div ng-include src = "'add-more.html'">

Benjamin McFerren
quelle
6
Eigentlich ist das nicht genau richtig: Der Pfad KANN relativ sein, aber er ist relativ zu der HTML-Datei, aus der die App instanziiert wurde. In Ihrem "falschen" Beispiel würde das funktionieren, wenn add-more.htmles sich im selben Verzeichnis wie befindet app.html. In meiner Antwort views/befindet sich im selben Verzeichnis wie app.html.
Jacob
Im Fall von Laravel und dem Platzieren der Struktur im öffentlichen Ordner (public / app / templates / includes) und der aufrufenden Datei (public / app / templates / index.php) muss der Include-Pfad (app / templates / includes) sein /filetoinclude.php). Ich konnte nicht relativ zur Arbeit werden.
Jason Spick
10

Für diejenigen, die nach der kürzestmöglichen "Item Renderer" -Lösung aus einem Teil suchen, bietet eine Kombination aus ng-repeat und ng-include :

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

Wenn Sie es für einen Repeater so verwenden, funktioniert es tatsächlich, aber nicht für zwei davon! Angular (v1.2.16) wird aus irgendeinem Grund ausflippen, wenn Sie zwei davon nacheinander haben. Daher ist es sicherer, das div vor xhtml zu schließen:

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

Balance
quelle
Das ist Jahre später, aber genau das brauchte ich, um in einem zu arbeiten <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Vielen Dank!
Eric D. Johnson
9

Vielleicht hilft dies Anfängern

<!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>
BG Bruno
quelle
7

Das hat bei mir funktioniert:

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

komplette div:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
Schakal
quelle
2
Sie sollten nicht kombinieren ng-viewund ng-inclueauf demselben Element; Der src (siehe templateUrl ) sollte in Ihrem Router konfiguriert sein.
Jacob
@jacob also wie würdest du das als route laden ?? Weil ich meine Ansicht zum Laden bringen kann und ich meinen Controller zum Auslösen bringen kann, aber sie nicht verbunden sind, wird die Ansicht leer geladen
Sonic Soul
@SonicSoul benutze ngRouter und setze es als Vorlage. Oder wenn Sie Routenparameter im Pfad verwenden möchten, verwenden Sie sie einfach wie einen JavaScript-Ausdruck:someVar + 'some string'
Jacob
@jacob Ich benutze bereits ngRouter, aber ich weiß nicht, wie ich diese Route in ng-include laden soll. Wenn ich eine Route in src verwende = lädt sie nur die gesamte Site, nicht nur die Ansicht :( wenn ich sie über den relativen Pfad zu lade HTML, es lädt nicht den Controller mit der Ansicht
Sonic Soul
@SonicSoul Versuchen Sie, eine Vorlage zu laden, die in einer Ansicht verschachtelt ist, die über ngRouter geladen wird? In diesem Fall sollte der Wert, den Sie src zur Verfügung stellen, ein absoluter Pfad in der Verzeichnisstruktur Ihres Projekts sein (keine App-Route). Wenn Sie versuchen, die Routenvorlage mit ngInclude festzulegen, ist dies falsch. Darüber hinaus war dies vor 6 Jahren und ich habe AngularJS seit mehr als 3 Jahren nicht mehr verwendet.
Jacob
0

Versuche dies 

<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>
Jayaweb
quelle
-1

Beim ng-build tritt der Fehler Datei nicht gefunden (404) auf. Wir können also den folgenden Code verwenden

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

anstelle von, 

<div ng-include="'views/transaction/test.html'"></div>
Rohit Parte
quelle