javascript - array - ¿Cuál es la sintaxis correcta de ng-include?
ng-repeat group by (7)
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>
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>
Para aquellos que resuelven problemas, es importante saber que ng-include requiere que la ruta url sea desde el directorio raíz de la aplicación y no desde el mismo directorio en el que reside el partial.html. (mientras parcial.html es el archivo de vista en el que 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''">
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>
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>
<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