AngularJS ng-include non include la vista a meno che non venga passato in $ scope

121

È sbagliato presumere che ngIncludepossa prendere un percorso grezzo? Continuo a provare a impostare il mio ngIncludecome segue:

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

Questo non funziona ma se faccio qualcosa del genere funziona.

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

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

Nel mio index.html

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

Fa ngIncludetranne Soltanto valori fuori del campo di applicazione? Se è così, perché è in questo modo e non è un'inclusione diretta del parziale html.

angularjs angularjs-ng-include

— Chad
fonte

Risposte:

327

ng-includeaccetta un'espressione. Se vuoi specificare l'URL esplicito direttamente lì, devi fornire una stringa.

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

— Tosh
fonte

Sì, l'ho appena visto. Gli esempi che stavo guardando stavano usando una versione precedente di angular.

— Ciad

Ho passato molto tempo questo pomeriggio a cercare di capire questo. Di Naturalmente ha bisogno di essere una stringa. Questo ha perfettamente senso.

— Code Whisperer

non funziona con ngSanitize abilitato nel modulo dell'app. Sto cercando una soluzione.

— Dida

Un'altra cosa: la pagina non può avere trattini bassi come nome file.

Le virgolette singole piccole risolvono il problema. Non ho potuto vedere il cambiamento esatto (il mio povero occhio). Si prega di menzionare aggiungere virgolette singole all'interno delle virgolette doppie in parole.

— Fizer Khan

ng-include, poiché altre direttive ( ng-class, ng-src...) valutano un'espressione angolare dall'ambito. Senza virgolette ( ''), cercherà una variabile dell'ambito.

Tieni presente che non è necessario specificare l' srcattributo.

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

Può essere riscritto in: (che è più semplice)

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

Puoi anche usare ng-include come elemento :

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

— Mistalis
fonte