html - example - href anula ng-clic en Angular.js
ng-< href angularjs (15)
¿Intentó redireccionar dentro de la función de cierre de sesión? Por ejemplo, supongamos que su función de cierre de sesión es la siguiente
$scope.logout = function()
{
$scope.userSession = undefined;
window.location = "http://www.yoursite.com/#"
}
Entonces puedes simplemente tener
<a ng-click="logout()">Sign out</a>
Cuando se definen los atributos href y ng-click:
<a href="#" ng-click="logout()">Sign out</a>
el atributo href tiene prioridad sobre ng-clic.
Estoy buscando una manera de aumentar la prioridad de ng-click.
href es obligatorio para Twitter Bootstrap, no puedo eliminarlo.
Aquí hay otra solución:
<a href="" ng-click="logout()">Sign out</a>
es decir, simplemente elimine el atributo # del atributo href
En Angular, <a> s son directivas . Como tal, si tiene un href vacío o no href , Angular llamará a event.preventDefault .
De la source :
element.on(''click'', function(event){
// if we have no href url, then don''t navigate anywhere.
if (!element.attr(href)) {
event.preventDefault();
}
});
Aquí hay un plnkr demuestra el escenario de href perdido.
Este ejemplo del sitio de documentación angular simplemente hace href sin siquiera asignarlo a una cadena vacía:
[<a href ng-click="colors.splice($index, 1)">X</a>]
Esto funcionó para mí en IE 9 y AngularJS v1.0.7:
<a href="javascript:void(0)" ng-click="logout()">Logout</a>
¡Gracias al comentario de duckeggs por la solución de trabajo!
Hay tantas respuestas para esta pregunta aquí, pero parece que hay un poco de confusión sobre lo que está sucediendo aquí.
En primer lugar, tu premisa
"href anula ng-click en Angular.js"
Está Mal. Lo que está sucediendo en realidad es que después del clic, el evento click se maneja primero por angular (definido por la directiva ng-click en angular 1.x y hace click en angular 2.x +) y luego continúa propagándose (lo que finalmente activa el navegador) para navegar a la URL definida con el atributo href ). (Consulte this para obtener más información sobre la propagación de eventos en JavaScript)
Si desea evitar esto, debe cancelar la propagación del evento utilizando el método preventDefault() la interfaz del evento :
<a href="#" ng-click="$event.preventDefault();logout()" />
(Esta es una funcionalidad javascript pura y nada que ver con angular)
Ahora, esto ya resolverá su problema, pero esta no es la solución óptima. Angular, con razón, promueve el patrón MVC . Con esta solución, su plantilla html se mezcla con la lógica de JavaScript. Debería tratar de evitar esto tanto como sea posible y poner su lógica en su controlador angular. Entonces, una mejor manera sería
<a href="#" ng-click="logout($event)" />
Y en su método logout ():
logout($event) {
$event.preventDefault();
...
}
Ahora el evento click no llegará al navegador, por lo que no intentará cargar el enlace apuntado por href . (Sin embargo, tenga en cuenta que si el usuario hace clic derecho sobre el enlace y lo abre directamente, entonces no habrá ningún evento de clic, sino que cargará directamente la URL apuntada por el atributo href ).
En cuanto a los comentarios sobre el color del enlace visitado en los navegadores. De nuevo, esto no tiene nada que ver con angular, si su href="..." apunta a una url visitada por su navegador de manera predeterminada, el color del enlace será diferente. Esto es controlado por CSS: Selector visitado , puede modificar su CSS para anular este comportamiento:
a {
color:pink;
}
PS1 :
Algunas respuestas sugieren usar:
<a href .../>
href es una directiva angular. Cuando su plantilla se procesa por angular esto se convertirá en
<a href="" .../>
Esas dos formas son esencialmente las mismas.
Le agregaré un ejemplo que funcione para mí y puede cambiarlo como desee.
Agrego el código de abajo dentro de mi controlador.
$scope.showNumberFct = function(){
alert("Work!!!!");
}
y para mi página de vista agrego el código de abajo.
<a href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>
No creo que deba eliminar "#" de href. Los siguientes trabajos con Angularjs 1.2.10
<a href="#/" ng-click="logout()">Logout</a>
Por favor, chequee esto
<a href="#" ng-click="logout(event)">Logout</a>
$scope.logout = function(event)
{
event.preventDefault();
alert("working..");
}
Probablemente deberías usar una etiqueta de botón si no necesitas un uri.
Simplemente escriba ng-click antes de href ... Funcionó para mí
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script>
angular.module("module",[])
.controller("controller",function($scope){
$scope.func =function(){
console.log("d");
}
})</script>
</head>
<body ng-app="module" ng-controller="controller">
<h1>Hello ..</h1>
<a ng-click="func()" href="someplace.html">Take me there</a>
</body>
</html>
Simplemente puede evitar el comportamiento predeterminado del evento click directamente en su plantilla.
<a href="#" ng-click="$event.preventDefault();logout()" />
Según la documentación angular ,
Directivas como ngClick y ngFocus exponen un objeto $ event dentro del alcance de esa expresión.
Solo una sugerencia más. Si necesita una URL real (para admitir la accesibilidad del navegador) puede hacer lo siguiente:
modelo:
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>
directiva:
$scope.linkClicked = function(link){
// your code here
$location.path(link);
};
De esta forma, su código en linkClicked () tendrá la posibilidad de ejecutarse antes de navegar hacia el enlace
También puedes probar esto:
<div ng-init="myVar = ''www.thesoftdesign''">
<h1>Tutorials</h1>
<p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
//for dynamic elements - if you want it in ng-repeat do below code
angular.forEach($scope.data, function(value, key) {
//add new value to object
value.new_url = "your url";
});
<div ng-repeat="row in data"><a ng-href="{{ row.url_content }}"></a></div>