href anula ng-click en Angular.js

Cuando se definen los atributos href y ng-click:

<a href="#" ng-click="logout()">Sign out</a>

el hrefatributo tiene prioridad sobre ng-click.

Estoy buscando una forma de aumentar la prioridad de ng-click.

href es necesario para Twitter Bootstrap, no puedo eliminarlo.

Probablemente debería usar una etiqueta de botón si no necesita un uri.

Este ejemplo del sitio de documentación angular simplemente lo hace hrefsin siquiera asignarlo a una cadena vacía:

[<a href ng-click="colors.splice($index, 1)">X</a>]

http://docs.angularjs.org/api/ng.directive:select

Simplemente puede evitar el comportamiento predeterminado del evento de clic 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.

Aquí hay otra solución:

<a href="" ng-click="logout()">Sign out</a>

es decir, simplemente elimine el # del atributo href

Solo una pista 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 manera, su código en linkClicked () tendrá la oportunidad de ejecutarse antes de navegar al enlace

En Angular, <a>s son directivas . Como tal, si tiene un vacío hrefo no href, Angular llamaráevent.preventDefault .

De la fuente :

    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 que demuestra el hrefescenario que falta .

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 realmente está sucediendo aquí.

Primero, tu premisa

"href anula ng-click en Angular.js"

Está Mal. Lo que realmente está sucediendo es que después de su clic, el evento de clic es manejado primero por angular (definido por la ng-clickdirectiva en angular 1.xy clicken angular 2.x +) y luego continúa propagándose (lo que eventualmente hace que el navegador navegue al URL definida con hrefatributo). (Consulte esto 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 de la interfaz del eventopreventDefault() :

<a href="#" ng-click="$event.preventDefault();logout()" />

(Esta es una funcionalidad pura de JavaScript y no tiene nada que ver con angular)

Ahora, esto ya resolverá su problema, pero esta no es la solución óptima. Angular, legítimamente, promueve el patrón MVC . Con esta solución, su plantilla html se mezcla con la lógica 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 de clic no llegará al navegador, por lo que no intentará cargar el enlace señalado href. (Sin embargo, tenga en cuenta que si el usuario hace clic con el botón derecho en el enlace y lo abre directamente, no habrá ningún evento de clic. En su lugar, cargará directamente la URL señalada por elhref atributo).

Respecto a los comentarios sobre el color del enlace visitado en los navegadores. Nuevamente, esto no tiene nada que ver con angular, si href="..."apunta a una URL visitada por su navegador de forma predeterminada, el color del enlace será diferente. Esto está controlado por CSS: Selector visitado , puede modificar su CSS para anular este comportamiento:

a {
   color:pink;
}

PS1 :

Algunas respuestas sugieren usar:

<a href .../>

hrefes una directiva angular. Cuando su plantilla es procesada por angular, esta se convertirá a

<a href="" .../>

Esas dos formas son esencialmente las mismas.

Simplemente escriba ng-click antes de href .. funcionó para mí

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.0" 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>

No creo que debas eliminar "#" de href. Siguiendo trabajos con Angularjs 1.2.10

<a href="#/" ng-click="logout()">Logout</a>

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>

Agregaré para ti un ejemplo que me funciona y puedes cambiarlo como quieras.

Agrego el código de abajo dentro de mi controlador.

     $scope.showNumberFct = function(){
        alert("Work!!!!");
     }

y para mi página de vista agrego el siguiente código.

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>

¿Intentó redirigir dentro de la función de cierre de sesión? Por ejemplo, digamos 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 tener

<a ng-click="logout()">Sign out</a>

Por favor, chequee esto

<a href="#" ng-click="logout(event)">Logout</a>

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}

//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>

Esto funciona para mi

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>