javascript ng-repeat - ¿Cuál es la sintaxis correcta de ng-include?
angularjs example (7)
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 ).
Answers
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>
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>
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>
<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
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'">
Tienes que citar una sola vez tu cadena src dentro de las comillas dobles:
<div ng-include src="'views/sidepanel.html'"></div>
En realidad no es demasiado complicado ...
Supongamos que está en el dominio example.com y desea realizar una solicitud al dominio example.net. Para hacerlo, debe cruzar los límites de los dominios, un no-no en la mayoría de las aplicaciones.
El único elemento que omite esta limitación son las etiquetas <script>. Cuando utiliza una etiqueta de secuencia de comandos, la limitación del dominio se ignora, pero en circunstancias normales, no puede hacer nada con los resultados, la secuencia de comandos simplemente se evalúa.
Ingrese JSONP. Cuando realiza su solicitud a un servidor que está habilitado para JSONP, pasa un parámetro especial que le informa al servidor un poco sobre su página. De esa manera, el servidor puede resumir su respuesta de una manera que su página puede manejar.
Por ejemplo, digamos que el servidor espera un parámetro llamado "devolución de llamada" para habilitar sus capacidades JSONP. Entonces su solicitud se vería como:
http://www.example.net/sample.aspx?callback=mycallback
Sin JSONP, esto podría devolver algún objeto JavaScript básico, como por ejemplo:
{ foo: 'bar' }
Sin embargo, con JSONP, cuando el servidor recibe el parámetro "devolución de llamada", envuelve el resultado de forma un poco diferente, devolviendo algo como esto:
mycallback({ foo: 'bar' });
Como puede ver, ahora invocará el método que especificó. Entonces, en su página, define la función de devolución de llamada:
mycallback = function(data){
alert(data.foo);
};
Y ahora, cuando se cargue el script, se evaluará y se ejecutará su función. ¡Voila, peticiones de dominio cruzado!
También vale la pena señalar el único problema importante con JSONP: se pierde mucho control de la solicitud. Por ejemplo, no hay una manera "agradable" de recuperar los códigos de falla adecuados. Como resultado, terminas usando temporizadores para monitorear la solicitud, etc., lo que siempre es un poco sospechoso. La propuesta para JSONRequest es una gran solución para permitir scripts de dominios cruzados, mantener la seguridad y permitir el control adecuado de la solicitud.
En estos días (2015), CORS es el enfoque recomendado en comparación con JSONRequest. JSONP sigue siendo útil para la compatibilidad con navegadores antiguos, pero dadas las implicaciones de seguridad, a menos que no tenga otra opción, CORS es la mejor opción.
