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

ng-repeat table (5)

Esto funcionó para mí:

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

div completa

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>

https://code.i-harness.com

Estoy tratando de incluir un fragmento de código HTML dentro de una ng-repeat , pero no puedo hacer que la inclusión funcione. Parece que la sintaxis actual de ng-include es 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>

En cualquier caso, 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á pasando mucho; Leí en la plantilla Cargar dinámicamente dentro de ng-repeat que podría causar un problema, así que reemplacé el contenido de sidepanel.html con solo la palabra foo , y 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 ejecutando todas las variaciones de ng-include referencia a la id del script, 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 renderiza, pero luego mi plantilla no. No obtengo errores en la consola ni en Node, y si hago clic en el enlace en src="views/sidepanel.html" en las herramientas de desarrollo, me lleva a mi plantilla (y muestra foo ).

Para aquellos que buscan la solución de "renderizador de elementos" más corta posible de forma parcial, un combo de ng-repeat y ng-include incluye :

<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 lo hará para 2 de ellos! Angular (v1.2.16) se volverá loco por algún motivo si tiene 2 de estos uno tras otro, por lo que es más seguro cerrar el div de forma pre-xhtml:

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

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>

Tienes que citar una sola vez tu cadena src dentro de las comillas dobles:

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

Source

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

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

    <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