Quelle est la syntaxe correcte de ng-include?

J'essaie d'inclure un extrait HTML à l'intérieur d'un ng-repeat , mais je ne peux pas obtenir l'inclusion pour fonctionner. Il semble que la syntaxe actuelle de ng-include soit différente de ce qu'elle était auparavant: je vois de nombreux exemples en utilisant

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

Mais dans les documents officiels , il dit d'utiliser

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

Mais ensuite , la page est montrée 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 n'est pas beaucoup de code, mais ça s'est passé beaucoup; J'ai lu dans le modèle de chargement dynamiquement à l'intérieur de ng-repeat que cela pourrait causer un problème, donc j'ai remplacé le contenu de 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 exécutant toutes les variations de ng-include référençant l' id du script, et toujours rien.

Ma page avait beaucoup plus dedans, mais maintenant je l'ai dénudé à 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 rend, mais mon modèle ne le fait pas. Je n'obtiens 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, il m'emmène à mon modèle (et affiche foo ).

Vous devez simplement citer votre chaîne src dans les guillemets doubles:

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

La source

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

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

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

Points à retenir:

-> Aucun espace dans src

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

Pour ces pannes de pannes, il est important de savoir que ng-include requiert que le chemin d'accès soit du répertoire racine de l'application et non du même répertoire où réside le fichier partial.html. (Alors que partial.html est le fichier de vue que 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'">

Pour ceux qui recherchent la solution la plus courte possible de "rendu d'élément" d'une partie, 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 tel pour un répéteur, cela fonctionnera, mais ne sera pas pour 2 d'entre eux! Angular (v1.2.16) sera fous 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>

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>

Cela a fonctionné pour moi:

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

Div complet:

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

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>