392 votes

AngularJS ng-inclure

J'essaie d'inclure un extrait de code html à l'intérieur d'un ng-repeat, mais je ne peux pas l'inclure au travail. Il semble que le courant de la syntaxe de l' ng-include est différent de ce qu'il était auparavant: je vois de nombreux exemples à l'aide de <div ng-include src="path/file.html"></div> , mais dans les docs officielles, il est dit d'utiliser <div ng-include="path/file.html"></div> mais ensuite, en bas de la page il est indiqué qu' <div ng-include src="path/file.html"></div>.

Quel que 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 n'est pas beaucoup de code, mais il a beaucoup de choses; j'ai lu dans les rs 12361680 que cela pourrait causer un problème, j'ai remplacé le contenu de sidepanel.html seulement avec le mot - foo, et toujours rien.

J'ai aussi essayé en déclarant le modèle directement dans la page comme ceci:

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

Et en cours d'exécution par toutes les variations de ng-include le référencement du script id, et toujours rien.

Ma page avait beaucoup plus en elle, mais maintenant, j'ai dépouillé la réduire à 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 alors mon modèle ne fonctionne pas. Je n'ai pas d'erreurs dans la console ou à partir d'un Nœud, et si je clique sur le lien en src="views/sidepanel.html" dans les outils de dev, il me prend pour mon modèle (et affiche foo).

756voto

jacob Points 6735

<div ng-include src="'views/sidepanel.html'"></div> (sans les espaces)

Source

130voto

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'espaces dans src

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

47voto

Benjamin McFerren Points 251

Pour ceux dépannage, il est important de savoir que ng-inclure nécessite le chemin de l'url à partir de l'app répertoire racine et pas dans le même répertoire où l'partial.html vie. (alors que partial.html est le fichier de vue que la ligne ng-inclure balisage balise peut être trouvé).

Par exemple:

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

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

9voto

Balance Points 129

Pour ceux qui sont à la recherche de la plus courte possible "rendu d'élément" solution partielle, donc un combo de ng-repeat et ng-comprennent:

<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, il va travailler, mais qui ne sont pas pour 2 d'entre eux! Angulaire (v1.2.16) freak out pour une raison quelconque, si vous avez 2 de ces l'un après l'autre, de sorte qu'il est plus sûr pour fermer le div de la pré-xhtml façon:

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

7voto

Siva Points 262

Cela a fonctionné pour moi:

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

complet div:

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

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: