AngularJS ng-include no incluye la vista a menos que se pase en $ scope

121

¿Es incorrecto suponer que ngIncludepuede tomar un camino en bruto? Sigo intentando configurar mi de la ngIncludesiguiente manera:

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

Esto no funciona, pero si hago algo como esto, funciona.

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

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

En mi index.html

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

¿ ngIncludeSolo excepto los valores fuera del alcance? Si es así, ¿por qué es así y no una inclusión directa del html parcial?

angularjs angularjs-ng-include Chad
fuente

Respuestas:

327

ng-includeacepta una expresión Si desea especificar la URL explícita directamente allí, debe dar una cadena.

<div ng-include src="'page.html'"></div>
Tosh
fuente
Sí, acabo de ver eso. Los ejemplos que estaba viendo usaban una versión anterior de angular.
Chad
44
Pasé mucho tiempo esta tarde tratando de resolver esto. Por supuesto , debe ser una cadena. Eso hace completo sentido.
Code Whisperer
no funciona con ngSanitize habilitado en el módulo de la aplicación. Estoy buscando una solucion.
Dida
44
Una cosa más: la página no puede tener guiones bajos como nombre de archivo.
55
Las comillas simples pequeñas resuelven el problema. No pude ver el cambio exacto (Mi pobre ojo). Mencione agregar comillas simples dentro de las comillas dobles en palabras.
Fizer Khan
1

ng-include, como otras directivas ( ng-class, ng-src...) evalúa una expresión angular del ámbito. Sin comillas ( ''), buscará una variable del alcance.

Tenga en cuenta que no tiene que especificar el srcatributo.

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

Se puede reescribir a: (eso es más simple)

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

También puede usar ng-include como elemento :

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