¿Cuál es la sintaxis correcta de ng-include?

398

Estoy tratando de incluir un fragmento de HTML dentro de un ng-repeat, pero no puedo hacer que la inclusión funcione. Parece que la sintaxis actual de ng-includees diferente de lo que era anteriormente: veo muchos ejemplos usando

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

Pero en los documentos oficiales , dice usar

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

Pero luego en la página se muestra como

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

De todos modos, lo intenté

<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>

Mi fragmento no es mucho código, pero está sucediendo mucho; Leí en la plantilla de carga dinámica dentrong-repeat que eso podría causar un problema, por lo que reemplacé el contenido sidepanel.htmlcon solo la palabra fooy aún nada.

También intenté declarar la plantilla directamente en la página de esta manera:

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

Y recorriendo todas las variaciones de hacer ng-includereferencia a la secuencia de comandos id, y aún nada.

Mi página tenía mucho más, pero ahora la he reducido a esto:

<!-- 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>

El encabezado se muestra, pero mi plantilla no. No obtengo errores en la consola o desde Node, y si hago clic en el enlace en las src="views/sidepanel.html"herramientas de desarrollo, me lleva a mi plantilla (y pantallas foo).

— jacob
fuente

775

Debe comillas simples su srccadena dentro de las comillas dobles:

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

Fuente

— jacob
fuente

44

Sí, esto me mordió el otro día. Respuesta algo relacionada stackoverflow.com/questions/13811948/…

— jaime

6060

La razón de esto es que cualquier cadena en ng tags se evalúa como una expresión angular. '' le dice que es una expresión de cadena.

— Gepsens

37

@Gepsens: tiene sentido una vez que lo sabes. Sin embargo, sería bueno que la documentación lo mencionara explícitamente.

— jacob

1

Sí, ahora sé por qué dicen "cadena" ... Gracias + Jacob por el hallazgo

— Shadoweb

77

Estoy de acuerdo, definitivamente necesitamos un esfuerzo de documentación en Angular y un sistema de diseño.

— Gepsens

134

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

O

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

O

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

Puntos para recordar:

-> No hay espacios en src

-> Recuerde usar comillas simples en comillas dobles para src

— Kalpesh Prajapati
fuente

8

La ng-include="'...'"sintaxis definitivamente se ve mejor.

— Pier-Luc Gendreau

¿así que supongo que ng-include no existe en formato de comentario?

— OzzyTheGiant

50

Para esos problemas, es importante saber que ng-include requiere que la ruta de la url sea del directorio raíz de la aplicación y no del mismo directorio donde reside el partial.html. (mientras que partial.html es el archivo de vista donde se puede encontrar la etiqueta de marcado ng-include en línea).

Por ejemplo:

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

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

— Benjamin McFerren
fuente

66

En realidad, esto no es exactamente correcto: la ruta PUEDE ser relativa, pero es relativa al archivo html del que se creó la aplicación. En su ejemplo "incorrecto", eso funcionaría si add-more.htmlestuviera en el mismo directorio que app.html. En mi respuesta, views/está en el mismo directorio que app.html.

— jacob

En el caso de Laravel y colocar la estructura en la carpeta pública (public / app / templates / includes) y el archivo de llamada es (public / app / templates / index.php) la ruta de inclusión debe ser (app / templates / includes /filetoinclude.php). No pude familiarizarme con el trabajo.

— Jason Spick

10

Para aquellos que buscan la solución de "renderizador de elementos" más breve posible desde un parcial, entonces una combinación de ng-repeat y ng-include :

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

En realidad, si lo usa así para un repetidor, funcionará, ¡pero no para 2 de ellos! Angular (v1.2.16) se asustará por alguna razón si tiene 2 de estos uno tras otro, por lo que es más seguro cerrar el div de la forma pre-xhtml:

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

— Equilibrar
fuente

Esto es años después, pero esto era precisamente lo que necesitaba para trabajar en a <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. ¡Gracias!

— Eric D. Johnson

9

Tal vez esto ayude a los principiantes.

<!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
fuente

7

Esto funcionó para mí:

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
fuente

2

No debes combinar ng-viewy ng-inclueen el mismo elemento; el src (consulte templateUrl ) debe configurarse en su enrutador.

— jacob

@jacob entonces, ¿cómo cargarías esto como una ruta? porque puedo hacer que mi vista se cargue, y puedo hacer que mi controlador se dispare, pero no están conectados, ver las cargas vacías

— Sonic Soul

@SonicSoul usa ngRouter y configúralo como plantilla. O si te refieres a usar parámetros de ruta en la ruta, simplemente úsalo como una expresión de JavaScript:someVar + 'some string'

— jacob

@jacob ya uso ngRouter pero no sé cómo cargar esa ruta en ng-include .. si uso una ruta en src = solo carga todo el sitio, no solo la vista :( si lo cargo por ruta relativa a html, no carga el controlador con la vista

— Sonic Soul

@SonicSoul, ¿está intentando cargar una plantilla anidada en una vista que se está cargando a través de ngRouter? Si es así, creo que el valor que proporciona a src debería ser una ruta absoluta en la estructura de directorios de su proyecto (no una ruta de aplicación). Si está tratando de configurar la plantilla de ruta usando ngInclude, eso está mal. Más allá de eso, esto fue hace 6 años, y no he usado AngularJS en probablemente más de 3 años.

— jacob

0

prueba esto

<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
fuente

-1

En ng-build, se produce un error de archivo no encontrado (404). Entonces podemos usar el siguiente código

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

en lugar de

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

— Rohit Parte
fuente