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.

angularjs angularjs-ng-include

— Tchad
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
source

Oui, je viens de voir ça. Les exemples que je regardais utilisaient une ancienne version d'angular.

— Tchad

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

Encore une chose: la page ne peut pas avoir de traits de soulignement comme nom de fichier.

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

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
source