web-dev-qa-db-fra.com

Quelle est la syntaxe correcte de ng-include?

J'essaie d'inclure un extrait de code HTML à l'intérieur d'un ng-repeat, mais je ne parviens pas à obtenir l'inclusion au travail. Il semble que la syntaxe actuelle de ng-include soit 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 ensuite en bas de la page il s’affiche:

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

Peu importe, 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’a pas beaucoup de code, mais il se passe beaucoup de choses; J'ai lu dans Charger dynamiquement le modèle dans ng-repeat que cela pourrait causer un problème, j'ai donc remplacé le contenu de sidepanel.html par le mot foo et toujours rien.

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

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

Et parcourant toutes les variantes de ng-include faisant référence à la variable id du script, et toujours rien.

Ma page contenait beaucoup plus de choses, 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 est affiché, mais mon modèle ne le fait pas. Je ne reçois aucune erreur dans la console ou à partir de Node, et si je clique sur le lien dans src="views/sidepanel.html" dans les outils de développement, cela me conduit à mon modèle (et affiche foo).

javascripthtml5includeangularjsrepeater
398
jacob

Vous devez citer entre guillemets votre chaîne src à l'intérieur des guillemets:

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

La source

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>

Points à retenir:

-> Pas d'espaces dans src

-> N'oubliez pas d'utiliser une seule citation en double citation pour src

132
Kalpesh Prajapati

Pour ceux qui rencontrent des 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 que le fichier partial.html. (alors que partial.html est le fichier de vue dans lequel la balise de balise ng-include en ligne 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'">

48
Benjamin McFerren

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

Pour ceux qui recherchent la solution de "rendu d'élément" la plus courte possible à partir d'un partiel, donc d'une combinaison de ng-repeat et de 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 ne fonctionnera pas pour deux d'entre eux! il est donc plus sûr de fermer la div de la manière pré-xhtml:

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

9
Balance

Cela a fonctionné pour moi:

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

complète div:

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

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

Sur ng-build, une erreur de fichier non trouvé (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>
0
Rohit Parte