405 Stimmen

Was ist die korrekte Syntax von ng-include?

Ich versuche, ein HTML-Snippet innerhalb einer ng-repeat aber ich kann das Include nicht zum Laufen bringen. Es scheint, dass die aktuelle Syntax von ng-include ist anders als zuvor: Ich sehe viele Beispiele, die

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

Aber in der offizielle Dokumente heißt es, man solle

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

Aber dann die Seite runter es wird angezeigt als

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

Trotzdem habe ich 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 eine Menge los; ich lese in Dynamisches Laden von Vorlagen innerhalb ng-repeat dass dies ein Problem verursachen könnte, also habe ich den Inhalt von sidepanel.html nur mit dem Wort foo und immer noch nichts.

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

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

Und durch alle Variationen von ng-include mit Verweis auf das Skript id und immer noch nichts.

Meine Seite enthielt viel mehr, aber jetzt habe ich sie auf das hier 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>

Die Kopfzeile wird gerendert, aber meine Vorlage nicht. Ich erhalte keine Fehler in der Konsole oder von Node, und wenn ich auf den Link in src="views/sidepanel.html" in den Entwicklungswerkzeugen, führt es mich zu meiner Vorlage (und zeigt foo ).

782voto

Jakob Jingleheimer Punkte 30000

Sie müssen Ihre Daten einzeln angeben src Zeichenkette innerhalb der doppelten Anführungszeichen:

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

Quelle

135voto

Kalpesh Prajapati Punkte 1695
    <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>

Zu beachtende Punkte:

--> Keine Leerzeichen in src

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

50voto

Benjamin McFerren Punkte 994

Für die Fehlersuche ist es wichtig zu wissen, dass ng-include verlangt, dass der Url-Pfad aus dem Stammverzeichnis der Anwendung stammt und nicht aus demselben Verzeichnis, in dem sich die Datei partial.html befindet. (während partial.html die Ansichtsdatei ist, in der das Inline ng-include Markup-Tag zu finden ist).

Zum Beispiel:

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

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

10voto

Balance Punkte 198

Für diejenigen, die nach einer möglichst kurzen "Item Renderer"-Lösung aus einem Teilbereich suchen, also eine Kombination aus ng-repeat und ng-include :

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

Wenn Sie es so für einen Repeater verwenden, funktioniert es, aber nicht für 2 Repeater! Angular (v1.2.16) wird aus irgendeinem Grund ausflippen, wenn Sie 2 von diesen nacheinander haben, so ist es sicherer, die div die pre-xhtml Weg zu schließen:

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

10voto

BGBRUNO Punkte 5709

Vielleicht ist dies für Anfänger hilfreich

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

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X