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