ng-href angularjs
Comportamiento del enlace angular.js: deshabilitar el enlace profundo para URL específicas (7)
Agregar target="_self" funciona en Angular 1.0.1:
<a target="_self" href=''/auth/facebook''>Sign in with Facebook</a>
Esta función está documentada ( https://docs.angularjs.org/guide/$location - busque ''_self'')
Si tiene curiosidad, observe la fuente angular (línea 5365 @ v1.0.1). El secuestro de clic solo ocurre si !elm.attr(''target'') es verdadero.
Tengo una aplicación Angular.js en funcionamiento con el modo HTML5 activado.
$location.Html5mode(true).hashbang("!");
Lo que quiero lograr es obtener algunas URL o <a> etiquetas para realizar el comportamiento de navegación normal en lugar de cambiar la URL en la barra de direcciones mediante la API de historial de HTML5 y manejarla usando controladores angulares.
Tengo estos enlaces:
<a href=''/auth/facebook''>Sign in with Facebook</a>
<a href=''/auth/twitter''>Sign in with Twitter</a>
<a href=''/auth/...''>Sign in with ...</a>
Y quiero que el navegador redireccione al usuario a /auth/... para que luego el usuario sea redirigido a un servicio de autenticación.
¿Hay alguna manera de que pueda hacer esto?
En tus rutas, intenta:
$routeProvider.otherwise({})
Este es el código para desactivar todos los enlaces profundos. Deshabilita el controlador de eventos click del rootElement.
angular.module(''myApp'', [])
.run([''$location'', ''$rootElement'', function ($location, $rootElement) {
$rootElement.off(''click'');
}]);
Me he topado con el mismo problema varias veces con angular, y aunque he encontrado dos soluciones funcionales, ambas se sienten como pirateo y no muy "angulares".
Hack # 1:
Enlace una window.location Actualizar al evento de click del enlace.
<a
href=/external/link.html
onclick="window.location = ''http://example.com/external/link.html'';"
>
La desventaja y los problemas con este enfoque son bastante obvios.
Hack # 2
Establezca $route angulares que realicen un cambio $window.location .
// Route
.when(''/external'', {
templateUrl: ''path/to/dummy/template'',
controller: ''external''
})
// Controller
.controller(''external'', [''$window'', function ($window) {
$window.location = ''http://www.google.com'';
}])
Me imagino que podría extender esto usando $routeParams o cadenas de consulta para que un controlador maneje todos los enlaces "externos".
Como dije, ninguna de estas soluciones es muy satisfactoria, pero si debe funcionar a corto plazo, podrían ser útiles.
En una nota lateral, realmente me gustaría ver el soporte angular rel=external para este tipo de funcionalidad, al igual que jQueryMobile lo usa para desactivar la carga de la página ajax.
Para agregar a la respuesta de Dragonfly, una de las mejores prácticas que he encontrado para limitar el número de atributos target = "_ self" es nunca poner el atributo ng-app en la etiqueta body. Al hacerlo, le está diciendo a angular que todo dentro de las etiquetas corporales forma parte de la aplicación angular.
Si está trabajando dentro de un contenedor estático que no debe verse afectado por angular, coloque su atributo ng-app en un div (u otro elemento) que rodee solo la ubicación en la que su aplicación angular funcionará. De esta manera solo lo hará tiene que poner el atributo target = ''_ self'' en los enlaces que serán elementos secundarios del elemento ng-app.
<body>
... top markup ...
<div ng-app="myApp">
<div ng-view></div>
</div>
... bottom markup ...
</body>
Para solucionar la respuesta de Nik, si tiene muchos enlaces y no desea agregar objetivos a cada uno de ellos, puede usar una directiva:
Module.directive(''a'', function () {
return {
restrict: ''E'',
link: function(scope, element, attrs) {
element.attr("target", "_self");
}
};
});
Una alternativa al método de Fran6co es desactivar la opción ''rewriteLinks'' en el $ locationProvider:
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
Esto logrará exactamente lo mismo que llamar a $ rootElement.off (''click''), pero no interferirá con otro javascript que maneje los eventos de clic en el elemento raíz de su aplicación.
Ver docs y fuente relevante