403 votes

Quelle est la syntaxe correcte de ng-include ?

J'essaie d'inclure un extrait de HTML à l'intérieur d'un fichier ng-repeat mais je n'arrive pas à faire fonctionner l'inclusion. Il semble que la syntaxe actuelle de ng-include est différent de ce qu'il était auparavant : Je vois de nombreux exemples utilisant

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

Mais dans le documents officiels il est dit d'utiliser

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

Mais alors en bas de la page il s'agit de

<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 ne contient pas beaucoup de code, mais il y a beaucoup de choses. Chargement dynamique du modèle à l'intérieur ng-repeat que cela pouvait poser un problème, j'ai donc remplacé le contenu de la rubrique sidepanel.html avec 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 passant en revue toutes les variations de ng-include en faisant référence au script du id et toujours rien.

Ma page contenait beaucoup plus de choses, mais maintenant je l'ai réduite à ça :

<!-- 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 est rendu, mais mon modèle ne l'est pas. Je n'obtiens aucune erreur dans la console ou à partir de Node, et si je clique sur le lien dans la section src="views/sidepanel.html" dans les outils de développement, il m'emmène vers mon modèle (et affiche foo ).

780voto

jacob Points 6735

Vous devez citer votre src à l'intérieur des guillemets :

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

Source :

4 votes

Oui, ça m'a piqué l'autre jour. Réponse un peu connexe stackoverflow.com/questions/13811948/

62 votes

La raison en est que toute chaîne de caractères dans les balises ng est en fait évaluée comme une expression angulaire. '' indique qu'il s'agit d'une expression de type chaîne.

39 votes

@Gepsens : c'est logique une fois que vous savez. Ce serait bien si la documentation le mentionnait explicitement.

134voto

Kalpesh Prajapati Points 192
    <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'espace dans src

--> N'oubliez pas d'utiliser des guillemets simples dans les guillemets doubles pour les src

8 votes

El ng-include="'...'" La syntaxe est définitivement mieux.

0 votes

Je suppose donc que ng-include n'existe pas dans le format commentaire ?

50voto

Benjamin McFerren Points 251

Pour ceux qui cherchent à résoudre les problèmes, il est important de savoir que ng-include exige que le chemin d'accès à l'URL provienne du répertoire racine de l'application et non du même répertoire où se trouve le fichier partial.html. (alors que partial.html est le fichier de vue où se trouve la balise de balisage ng-include en ligne).

Par exemple :

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

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

6 votes

En fait, ce n'est pas tout à fait exact : 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 add-more.html se trouvait dans le même répertoire que app.html . Dans ma réponse, views/ se trouve dans le même répertoire que app.html .

0 votes

Dans le cas de Laravel et en plaçant la structure dans le dossier public (public/app/templates/includes) et le fichier d'appel est (public/app/templates/index.php) le chemin d'inclusion devait être (app/templates/includes/filetoinclude.php). Je n'ai pas réussi à faire fonctionner la fonction relative.

10voto

Balance Points 129

Pour ceux qui recherchent la solution la plus courte possible pour le "rendu d'éléments" à partir d'un partiel, donc une combinaison 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 cela pour un répéteur, cela fonctionnera, mais pas pour deux d'entre eux ! Angular (v1.2.16) panique pour une raison quelconque si vous avez 2 de ces répétiteurs 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>

0 votes

C'est des années plus tard, mais c'était précisément ce dont j'avais besoin pour travailler dans un centre de formation. <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak> . Merci !

7voto

Siva Points 262

Cela a marché 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>

2 votes

Vous ne devez pas combiner ng-view y ng-inclue sur le même élément ; le src (voir templateUrl ) doit être configuré dans votre routeur.

0 votes

@jacob alors comment charger ceci comme une route ? parce que je peux faire en sorte que ma vue se charge, et je peux faire en sorte que mon contrôleur se déclenche, mais ils ne sont pas connectés, la vue se charge vide.

0 votes

@SonicSoul utiliser ngRouter et le définir comme modèle. Ou si vous voulez utiliser les paramètres de la route dans le chemin, utilisez-le comme une expression JavaScript : someVar + 'some string'

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X