Qual é a sintaxe correta de ng-include?

398

Estou tentando incluir um snippet HTML dentro de um ng-repeat, mas não consigo fazer com que o include funcione. Parece que a sintaxe atual de ng-includeé diferente do que era anteriormente: vejo muitos exemplos usando

<div ng-include src="path/file.html"></div>

Mas nos documentos oficiais , ele diz para usar

<div ng-include="path/file.html"></div>

Mas, abaixo da página , é mostrado como

<div ng-include src="path/file.html"></div>

Independentemente disso, eu tentei

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

Meu snippet não é muito código, mas tem muita coisa acontecendo; Eu li no modelo de carregamento dinamicamente dentro deleng-repeat que poderia causar um problema, então substituí o conteúdo sidepanel.htmlpor apenas a palavra fooe ainda nada.

Eu também tentei declarar o modelo diretamente na página assim:

<script type="text/ng-template" id="tmpl">
    foo
</script>

E percorrendo todas as variações de ng-includereferência aos scripts id, e ainda nada.

Minha página tinha muito mais, mas agora a reduzi a isso:

<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
    <!-- views/main.html -->
    <header>
        <h2>Blah</h2>
    </header>
    <article id="sidepanel">
        <section class="panel"> <!-- will have ng-repeat="panel in panels" -->
            <div ng-include src="views/sidepanel.html"></div>
        </section>
    </article>
<!-- index.html -->
</body>
</html>

O cabeçalho é renderizado, mas meu modelo não. Não recebo erros no console ou no Node e, se clicar no link nas src="views/sidepanel.html"ferramentas de desenvolvimento, ele será levado ao meu modelo (e exibições foo).

javascript html include angularjs repeater jacob
fonte

Respostas:

775

Você deve citar sua srccadeia de caracteres entre aspas duplas:

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

Fonte

jacob
fonte
4
Sim, isso me mordeu no outro dia. Resposta um pouco relacionada stackoverflow.com/questions/13811948/…
jaime
60
A razão para isso é que qualquer string nas tags ng é de fato avaliada como uma expressão angular. '' diz que é uma expressão de string.
Gepsens 17/02
37
@ Gepsens: faz sentido quando você sabe. Seria bom se a documentação mencionasse explicitamente.
19243 jacob
11
Sim agora eu sei porque eles dizem "string" ... Graças + jacob para a descoberta
Shadoweb
7
Concordo, definitivamente precisamos de um esforço de documentação no Angular e um sistema de layout.
Gepsens
134 
    <ng-include src="'views/sidepanel.html'"></ng-include>

OU

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

OU

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

Pontos para lembrar:

-> Não há espaços no src

-> Lembre-se de usar aspas simples em aspas duplas para src

Kalpesh Prajapati
fonte
8
A ng-include="'...'"sintaxe definitivamente parece melhor.
Pier-Luc Gendreau
então estou assumindo que ng-include não existe no formato de comentário?
OzzyTheGiant
50

Para a solução de problemas, é importante saber que o ng-include exige que o caminho da URL seja do diretório raiz do aplicativo e não do mesmo diretório em que o primary.html reside. (parcial.html é o arquivo de exibição que pode ser encontrado na tag de marcação ng-include embutida).

Por exemplo:

Correto: div ng-include src = "'/views/partials/tabSlides/add-more.html'">

Incorreto: div ng-include src = "'add-more.html'">

Benjamin McFerren
fonte
6
Na verdade, isso não está exatamente correto: o caminho PODE ser relativo, mas é relativo ao arquivo html do qual o aplicativo foi instanciado. No seu exemplo "incorreto", isso funcionaria se add-more.htmlestivesse no mesmo diretório que app.html. Na minha resposta, views/está no mesmo diretório que app.html.
jacob
No caso do Laravel e colocando a estrutura na pasta pública (public / app / templates / includes) e o arquivo de chamada é (public / app / templates / index.php) o caminho de inclusão necessário (app / templates / includes /filetoinclude.php). Eu não conseguia me relacionar com o trabalho.
precisa
10

Para aqueles que procuram a menor solução possível de "renderizador de itens" de uma parcial, então uma combinação de ng-repeat e ng-include :

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />

Na verdade, se você usá-lo assim para um repetidor, ele funcionará, mas não para 2 deles! O Angular (v1.2.16) vai surtar por algum motivo, se você tiver dois deles um após o outro, por isso é mais seguro fechar a div da maneira pré-xhtml:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

Saldo
fonte
isso foi anos depois, mas era exatamente isso que eu precisava para trabalhar em um <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Obrigado!
Eric D. Johnson
9

Talvez isso ajude para iniciantes

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="custom.css">
  </head>
  <body>
    <div ng-include src="'view/01.html'"></div>
    <div ng-include src="'view/02.html'"></div>
    <script src="angular.min.js"></script>
  </body>
</html>
BG Bruno
fonte
7

Isso funcionou para mim:

ng-include src="'views/templates/drivingskills.html'"

div completo:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
Chacal
fonte
2
Você não deve combinar ng-viewe ng-inclueno mesmo elemento; o src (consulte templateUrl ) deve ser configurado no seu roteador.
27415
@jacob Então, como você carregaria isso como uma rota? porque eu posso conseguir o meu fim de carga, e eu posso obter meu controlador de gatilho, mas eles não estão conectados, veja cargas esvaziar
o Sonic Alma
O @SonicSoul usa o ngRouter e define-o como modelo. Ou se você quer dizer params uso de rota no caminho, apenas usá-lo como uma expressão JavaScript:someVar + 'some string'
jacob
@jacob eu já uso o ngRouter, mas não sei como carregar essa rota no ng-include .. se eu usar uma rota no src = ele apenas carrega o site inteiro, não apenas a view :( se eu carregá-lo pelo caminho relativo para html, ele não carrega o controlador com a exibição #
Sonic Soul
@SonicSoul você está tentando carregar um modelo aninhado em uma exibição que está sendo carregada via ngRouter? Nesse caso, acho que o valor que você fornece ao src deve ser um caminho absoluto na estrutura de diretórios do seu projeto (não uma rota de aplicativo). Se você está tentando definir o modelo de rota usando o ngInclude, isso está errado. Além disso, isso foi há 6 anos e eu não uso o AngularJS há provavelmente mais de 3 anos.
27418
0

tente isso 

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("customers.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>
jayaweb
fonte
-1

No ng-build, ocorre um erro de arquivo não encontrado (404). Para que possamos usar o código abaixo

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

instado de, 

<div ng-include="'views/transaction/test.html'"></div>
Rohit Parte
fonte