AngularJS ng-include n'inclut pas la vue sauf s'il est passé dans $ scope

121

Est-il faux de supposer que cela ngIncludepeut emprunter une voie brute? Je continue d'essayer de configurer mon ngIncludecomme suit:

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

Cela ne fonctionne pas mais si je fais quelque chose comme ça, ça marche.

// HeaderController
app.controller('HeaderCtrl', function($scope){
   $scope.templates = {[
     template: { url: 'views/header.html' }
   ]};

   $scope.template = $scope.templates[0].template;
});

Dans mon index.html

<div ng-controller="HeaderCtrl">
  <div ng-include src="template.url"></div>
</div>

Existe-t-il ngIncludeuniquement des valeurs hors de la portée? Si oui, pourquoi est-ce de cette façon et non une simple inclusion du partiel html.

Tchad
la source

Réponses:

327

ng-includeaccepte une expression. Si vous souhaitez spécifier l'URL explicite directement là-dedans, vous devez donner une chaîne.

<div ng-include src="'page.html'"></div>
Tosh
la source
Oui, je viens de voir ça. Les exemples que je regardais utilisaient une ancienne version d'angular.
Tchad
44
J'ai passé beaucoup de temps cet après-midi à essayer de comprendre celui-ci. Bien sûr, il doit s'agir d'une chaîne. Cela fait complet sens.
Code Whisperer
ne fonctionne pas avec ngSanitize activé dans le module d'application. Je cherche une solution.
Dida
4
Encore une chose: la page ne peut pas avoir de traits de soulignement comme nom de fichier.
5
Les petits guillemets simples résolvent le problème. Je ne pouvais pas voir le changement exact (mon pauvre œil). Veuillez mentionner ajouter des guillemets simples à l'intérieur des guillemets doubles dans les mots.
Fizer Khan
1

ng-include, comme d'autres directives ( ng-class, ng-src...) évalue une expression angulaire de la portée. Sans guillemets ( ''), il recherchera une variable de la portée.


Notez que vous n'avez pas à spécifier l' srcattribut.

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

Peut être réécrit en: (c'est plus simple)

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

Vous pouvez également utiliser ng-include comme élément :

<ng-include src="'views/header.html'"></ng-include>
Mistalis
la source