Quelle est la syntaxe correcte de ng-include?

398

J'essaie d'inclure un extrait HTML à l'intérieur d'un ng-repeat, mais je ne parviens pas à faire en sorte que l'inclusion fonctionne. Il semble que la syntaxe actuelle de ng-includesoit différente de ce qu'elle était auparavant: je vois de nombreux exemples utilisant

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

Mais dans les documents officiels , il est dit d'utiliser

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

Mais en bas de la page, il apparaît comme

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

Quoi qu'il en soit, j'ai essayé

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

Mon extrait de code n'est pas beaucoup de code, mais il se passe beaucoup de choses; J'ai lu dans Dynamically load template insideng-repeat que cela pouvait causer un problème, j'ai donc remplacé le contenu de sidepanel.htmlpar juste le mot foo, et toujours rien.

J'ai également essayé de déclarer le modèle directement dans la page comme ceci:

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

Et en parcourant toutes les variantes de ng-includeréférencement des scripts id, et toujours rien.

Ma page en avait beaucoup plus, mais maintenant je l'ai réduite à ceci:

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

L'en-tête s'affiche, mais pas mon modèle. Je ne reçois aucune erreur dans la console ou dans Node, et si je clique sur le lien dans les src="views/sidepanel.html"outils de développement, cela m'amène à mon modèle (et s'affiche foo).

javascript html include angularjs repeater Jacob
la source

Réponses:

775

Vous devez mettre votre srcchaîne entre guillemets simples :

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

La source

Jacob
la source
4
oui, ça m'a mordu l'autre jour. Réponse quelque peu liée stackoverflow.com/questions/13811948/…
jaime
60
La raison en est que toute chaîne dans les balises ng est en fait évaluée comme une expression angulaire. '' lui dit que c'est une expression de chaîne.
Gepsens
37
@Gepsens: cela a du sens une fois que vous savez. Ce serait bien si la documentation le mentionnait cependant explicitement.
jacob
1
Ouais maintenant je sais pourquoi ils disent "string" ... Merci + jacob pour la trouvaille
Shadoweb
7
Je suis d'accord, nous avons certainement besoin d'un effort de documentation sur Angular et d'un système de mise en page.
Gepsens
134 
    <ng-include src="'views/sidepanel.html'"></ng-include>

OU

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

OU

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

Points à retenir:

-> Pas d'espaces dans src

-> N'oubliez pas d'utiliser un guillemet simple en guillemet double pour src

Kalpesh Prajapati
la source
8
La ng-include="'...'"syntaxe est définitivement meilleure.
Pier-Luc Gendreau du
donc je suppose que ng-include n'existe pas sous forme de commentaire?
OzzyTheGiant
50

Pour ces problèmes, il est important de savoir que ng-include nécessite que le chemin de l'URL provienne du répertoire racine de l'application et non du même répertoire où réside le partial.html. (alors que partial.html est le fichier de vue dans lequel la balise de balisage en ligne ng-include peut être trouvée).

Par exemple:

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

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

Benjamin McFerren
la source
6
En fait, ce n'est pas exactement correct: le chemin peut être relatif, mais il est relatif au fichier html à partir duquel l'application a été instanciée. Dans votre exemple «incorrect», cela fonctionnerait si se add-more.htmltrouvait dans le même répertoire que app.html. Dans ma réponse, views/est dans le même répertoire que app.html.
jacob
Dans le cas avec Laravel et en plaçant la structure dans le dossier public (public / app / templates / includes) et le fichier appelant est (public / app / templates / index.php) le chemin d'inclusion devait être (app / templates / includes /filetoinclude.php). Je ne pouvais pas aller au travail.
Jason Spick
10

Pour ceux qui recherchent la solution la plus courte de "rendu d'article" à partir d'un partiel, donc un combo de ng-repeat et ng-include :

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

En fait, si vous l'utilisez comme ça pour un répéteur, cela fonctionnera, mais pas pour 2 d'entre eux! Angular (v1.2.16) va paniquer pour une raison quelconque si vous en avez 2 l'un après l'autre, il est donc plus sûr de fermer le div de la manière pré-xhtml:

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

Équilibre
la source
c'est des années plus tard, mais c'était précisément ce dont j'avais besoin pour travailler dans un <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Merci!
Eric D. Johnson
9

Peut-être que cela aidera les débutants

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

Cela a fonctionné pour moi:

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

div complète:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
Chacal
la source
2
Vous ne devez pas combiner ng-viewet ng-incluesur le même élément; le src (voir templateUrl ) doit être configuré dans votre routeur.
jacob
@jacob alors comment voulez-vous charger cela comme un itinéraire ?? parce que je peux charger ma vue, et que je peux faire déclencher mon contrôleur, mais ils ne sont pas connectés, voir les charges vides
Sonic Soul
@SonicSoul utilise ngRouter et le définit comme modèle. Ou si vous voulez dire utiliser des paramètres de route dans le chemin, utilisez-le simplement comme une expression JavaScript:someVar + 'some string'
jacob
@jacob j'utilise déjà ngRouter mais je ne sais pas comment charger cet itinéraire dans ng-include .. si j'utilise un itinéraire dans src = il charge juste le site entier pas seulement la vue :( si je le charge par un chemin relatif vers html, il ne charge pas le contrôleur avec la vue
Sonic Soul
@SonicSoul essayez-vous de charger un modèle imbriqué dans une vue qui se charge via ngRouter? Si c'est le cas, je pense que la valeur que vous fournissez à src devrait être un chemin absolu dans la structure de répertoires de votre projet (pas une route d'application). Si vous essayez de définir le modèle d'itinéraire à l'aide de ngInclude, c'est faux. Au-delà, c'était il y a 6 ans, et je n'ai pas utilisé AngularJS depuis probablement plus de 3 ans.
jacob
0

essaye ça 

<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
la source
-1

Sur ng-build, une erreur de fichier introuvable (404) se produit. Nous pouvons donc utiliser le code ci-dessous

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

au lieu de, 

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