javascript - rutas - varios controladores angularjs
AngularJS<a> enlaces de etiquetas no funcionan (5)
AngularJS sufre de una documentación escasa, espero que su creciente impulso la mejore. Creo que AngularJS está destinado principalmente como un SPA , y tal vez la idea detrás de desactivar por defecto todas las etiquetas permite incorporar fácilmente angular en algunos html ya existentes.
Esto permite una refacturación rápida del comportamiento de "enrutamiento" predeterminado de un sitio web "tradicional" (bueno, páginas de scripts conectadas entre sí) en el sistema de enrutamiento angular, que es más un enfoque MVC, más adecuado para aplicaciones web.
Tengo un índice de objetos devueltos por la búsqueda. La plantilla tiene una repetición ng donde la URL del elemento se construye a partir de datos en el modelo, pero en el marcado final la etiqueta "a" no funciona. El ng-href y href son correctos, la barra de URL cambia cuando se hace clic en el enlace pero la página no se carga. Al hacer una actualización del navegador después del clic obtiene la página. ¿Entonces algo en Angular está cambiando la barra de URL pero no disparando una carga?
No puedo hacer que esto se reproduzca en un jsfiddle porque el problema parece estar en cargar el json en la plantilla después de una función $ resource.query (), que no puedo hacer desde un jsfiddle. Con una consulta simulada que carga datos estáticos, jsfiddle funciona aunque el marcado final sea idéntico.
La plantilla AngularJS se ve así:
<div ng-controller="VideoSearchResultsCtrl" class="row-fluid">
<div class="span12" >
<div class="video_thumb" ng-repeat="video in videos">
<p>
<a ng-href="/guides/{{video._id}}" data-method="get">
<img ng-src="{{video.poster.large_thumb.url}}">
</a>
</p>
</div>
</div>
</div>
Los resultados se ven bien y producen el siguiente marcado final:
<div ng-controller="VideoSearchResultsCtrl" class="row-fluid ng-scope">
<div class="span12">
<!-- ngRepeat: video in videos --><div class="video_thumb ng-scope" ng-repeat="video in videos">
<p>
<a ng-href="/guides/5226408ea0eef2d029673a80" data-method="get" href="/guides/5226408ea0eef2d029673a80">
<img ng-src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg" src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg">
</a>
</p>
</div><!-- end ngRepeat: video in videos -->
</div>
</div>
El código del controlador es:
GuideControllers.controller(''VideoSearchResultsCtrl'', [''$scope'', ''$location'', ''VideoSearch'',
function($scope, $location, VideoSearch) {
$scope.videos = VideoSearch.query({ namespace: "api", resource: "videos", action: ''search'', q: $location.search().q });
}
]);
Usando AngularJS 1.2-rc.3. También intenté usar un ng-click y un onclick antiguo normal para obtener una página cargada incluso con una URL estática, pero los clics nunca activan el código. Por cierto, los enlaces estáticos no angulares en esta página funcionan, por lo que funcionan la barra de menú y el mensaje de salida.
¿Qué he hecho mal aquí o es esto un error en AngularJS?
De la lista de correo obtuve una respuesta:
¿Has configurado alguna vez tu $ locationProvider a html5Mode? Si es así, esto causaría sus problemas. Podría forzarlo a ir siempre a la url añadiendo target = "_ self" a su etiqueta. Dale un tiro.
Me había configurado para usar HTML5, por lo que agregar el target="_self" a la etiqueta solucionó el problema. Todavía estoy investigando por qué esto funciona.
Encuentra esta línea:
$locationProvider.html5Mode(true)
cambiarlo por:
$locationProvider.html5Mode(true).hashPrefix(''!'')
e incluya esta línea en el encabezado de index.html si no la tiene.
<base href="/">
No estoy seguro de si esto se ha actualizado desde que se respondió esta publicación, pero puede configurar esto en el inicio de la aplicación. Al establecer rewriteLinks en falso, se vuelven a habilitar las etiquetas a, pero aún se deja html5mode , que viene con todos sus propios beneficios. He agregado un poco de lógica en torno a estas configuraciones para revertir el modo html5mode en navegadores donde window.history no es compatible (IE8)
app.config([''$locationProvider'', function ($locationProvider) {
if (window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: true,
rewriteLinks: false
});
}
else {
$locationProvider.html5Mode(false);
}
}]);
Sé que esta publicación es antigua, pero recientemente me encontré con este problema también. Mi página .html tenía la base
//WRONG!
<base href="/page" />
y la solución:
//WORKS!
<base href="/page/" />
observe la barra invertida (''/'') después de ''página''.
No estoy seguro si esto se aplica a otros casos, ¡pero pruébalo!