AngularJS ng-include não inclui view, a menos que seja passado no escopo $

121

É errado supor que ngIncludepode seguir um caminho bruto? Eu continuo tentando definir o meu da ngIncludeseguinte forma:

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

Isso não funciona, mas se eu fizer algo assim, ele funciona.

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

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

No meu index.html

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

Será ngIncludeúnica, exceto valores fora do alcance? Se sim, por que é assim e não uma inclusão direta do html parcial?

angularjs angularjs-ng-include Chade
fonte

Respostas:

327

ng-includeaceita uma expressão. Se você deseja especificar o URL explícito diretamente, deve fornecer uma string.

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

Tosh
fonte

Sim, acabei de ver isso. Os exemplos que eu estava vendo estavam usando uma versão mais antiga do angular.

Chad

Passei muito tempo esta tarde tentando descobrir isso. De curso ele precisa ser uma string. Isso faz total sentido.

Code Whisperer

não funciona com o ngSanitize ativado no módulo de aplicativo. Estou procurando uma solução.

Dida

Mais uma coisa: a página não pode ter sublinhados como nome do arquivo.

Pequenas aspas simples resolvem o problema. Não pude ver a mudança exata (meu pobre olho). Mencione adicionar aspas simples dentro das aspas duplas em palavras.

Fizer Khan

ng-include, como outras diretivas ( ng-class, ng-src...) avalia uma expressão angular do escopo. Sem aspas ( ''), ele procurará uma variável do escopo.

Observe que você não precisa especificar o srcatributo.

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

Pode ser reescrito para: (isso é mais simples)

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

Você também pode usar ng-include como um elemento :

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

Mistalis
fonte