it-swarm.com.de

Was ist die korrekte Syntax von ng-include?

Ich versuche, ein HTML-Snippet in einen ng-repeat einzufügen, kann das Include jedoch nicht zum Laufen bringen. Es scheint, dass die aktuelle Syntax von ng-include anders 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 die Seite runter wird 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 Ausschnitt ist nicht sehr viel Code, aber es ist viel los. Ich las in Dynamisches Laden der Vorlage in ng-repeat , dass dies ein Problem verursachen könnte, also habe ich den Inhalt von sidepanel.html durch nur das Wort foo ersetzt, und immer noch nichts.

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

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

Und alle Variationen von ng-include durchlaufen, die auf die id des Skripts verweisen, und immer noch nichts.

Meine Seite enthielt noch viel mehr, aber jetzt habe ich es auf Folgendes 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 wird nicht Ich erhalte keine Fehler in der Konsole oder vom Knoten, und wenn ich in den Dev-Tools auf den Link in src="views/sidepanel.html" klicke, gelangt man zu meiner Vorlage (und zeigt foo) an.

398
jacob

Sie müssen Ihre src-Zeichenfolge in Anführungszeichen setzen:

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

Quelle

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

Punkte, die man sich merken sollte:

-> Keine Leerzeichen in src

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

132

Für die Fehlersuche ist es wichtig zu wissen, dass für ng-include der URL-Pfad aus dem Stammverzeichnis der App und nicht aus demselben Verzeichnis stammen muss, in dem die partial.html gespeichert ist. (Wobei partial.html die View-Datei ist, in der das Inline-Markierungs-Tag ng-include gefunden werden kann).

Zum Beispiel:

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

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

48

Vielleicht hilft das für Anfänger

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

Für diejenigen, die nach einer möglichst kurzen "Item Renderer" -Lösung aus einem partiellen 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 auf diese Weise für einen Repeater verwenden, wird es funktionieren, jedoch nicht für zwei von ihnen! Daher ist es sicherer, das div auf die pre-xhtml-Methode zu schließen:

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

9
Balance

Das hat für mich funktioniert:

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

komplettes div:

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

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

Bei ng-build tritt eine Datei nicht gefunden (404) auf. Wir können also unten Code verwenden 

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

anstelle von,  

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