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