Was ist die korrekte Syntax von ng-include?

387

Ich versuche, ein HTML-Snippet innerhalb einer ng-repeat einzuschließen, aber ich kann das Include nicht zum Funktionieren bringen. Es scheint, die aktuelle Syntax von ng-include anders ist als das, was es war vorher: Ich habe viele Beispiele siehe unter VerwendungWas ist die korrekte Syntax von ng-include?

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

Aber im official docs, heißt es

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

Aber dann down the page gezeigt, wie es zu benutzen

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

Unabhängig davon, 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 viel los bekam; Ich habe in Dynamically load template inside ng-repeat gelesen, dass das ein Problem verursachen könnte, also ersetzte ich den Inhalt von sidepanel.html durch nur das Wort foo, und immer noch nichts.

Ich habe auch versucht die Vorlage direkt in der Seite wie folgt erklärt:

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

und läuft durch alle Variationen von ng-include Referenzierung des Skripts id, und immer noch nichts.

Meine Seite hatte viel mehr drin, aber jetzt habe ich es dies nur abgespeckte:

<!-- 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 macht, aber dann nicht meine Vorlage tut. Ich bekomme keine Fehler in der Konsole oder von Node, und wenn ich auf den Link in src="views/sidepanel.html" in Dev Tools klicke, bringt es mich zu meiner Vorlage (und zeigt foo).

Quelle

2012-12-18 jacob

752

Sie müssen Apostroph Ihre src Zeichenfolge innerhalb der doppelten Anführungszeichen:

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

Source

Quelle

2012-12-19 00:11:08 jacob

ja, das hat mich den anderen Tag gebissen. Etwas verwandte Antwort http://stackoverflow.com/questions/13811948/different-ng-includes-on-the-same-page-how-to-send-different-variables-to-each/13812605#13812605 – jaime

+59

Der Grund für Das bedeutet, dass jede Zeichenfolge in ng-Tags tatsächlich als Winkelausdruck ausgewertet wird. '' sagt, dass es ein String-Ausdruck ist. – Gepsens

+33

@Gepsens: Es macht Sinn, wenn Sie es wissen. Es wäre schön, wenn die Dokumentation es explizit erwähnen würde. – jacob

Für diejenigen, die Fehlersuche, ist es wichtig zu wissen, dass ng-die URL-Pfad erfordert zu sein aus dem App-Stammverzeichnis und nicht aus demselben Verzeichnis, in dem partial.html lebt. (während partial.html ist die View-Datei, die das Inline-ng-include-Markup-Tag gefunden werden kann).

Zum Beispiel:

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

Falsch: div ng-include src = "'hinzufügen-mehr.html‘„>

Quelle

2013-11-16 19:39:29

Eigentlich ist das nicht genau richtig: Der Pfad kann relativ sein, aber es ist relativ zu der HTML-Datei, von der die App instanziiert wurde. In Ihrem "inkorrekten" Beispiel würde das funktionieren, wenn Sie "add-more" hinzufügen.html' befand sich im selben Verzeichnis wie 'app.html'. In meiner Antwort befindet sich 'views /' im selben Verzeichnis wie 'app.html'. – jacob

Im Fall mit 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/filetoinclude.php). Ich konnte nicht relativ zur Arbeit kommen. –

Für diejenigen, die für die kürzestmögliche suchen "Elementrenderers" Lösung aus einem partiellen, so eine Combo von ng-repeat und ng-umfassen:

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

Eigentlich, wenn Sie es so für einen Repeater verwenden, wird es funktionieren, aber nicht für 2 von ihnen! Angular (v1.2.16) wird aus irgendeinem Grund ausflippen, wenn Sie 2 dieser nacheinander haben, so es ist sicherer, den div den vor-xhtml Weg zu schließen:

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

Quelle

2014-05-29 06:55:08 Balance

127

<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 zu beachten:

-> Keine Leerzeichen in src

-> Denken Sie daran, einfache Anführungszeichen in doppelte Anführungszeichen für src

Quelle

2014-06-23 13:59:47

Die 'ng-include =" '... "" '- Syntax sieht definitiv besser aus. –

also nehme ich an, dass ng-include nicht im Kommentarformat existiert? – OzzyTheGiant

Vielleicht für Anfänger helfen diese

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

Quelle

2014-09-09 21:43:33

Das ist für mich gearbeitet zu verwenden:

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

komplett div:

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

Quelle

2014-09-12 21:12:28 Jackal

Sie sollten 'ng-view' und' ng-include' nicht auf demselben Element kombinieren; Der src (siehe [templateUrl] (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when)) sollte in Ihrem Router konfiguriert werden. – jacob

@jacob also wie würdest du das als route laden ?? weil ich meine Ansicht laden kann, und ich kann meinen Controller auslösen, aber sie sind nicht verbunden, Ansicht lädt leer –

@ SonicSoul verwenden ngRouter und legen Sie es als die Vorlage. Oder wenn Sie route params im Pfad verwenden wollen, benutzen Sie es einfach wie einen JavaScript-Ausdruck: 'someVar + 'some string'' – jacob

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

Quelle

2016-02-15 11:20:15 jayaweb

Was ist die korrekte Syntax von ng-include?

Antwort

Verwandte Themen