Evitar el comportamiento de ancla predeterminado AngularJS

Question

Cuando el usuario hace clic en un enlace, quiero ejecutar algún código en una función dentro del controlador. Pero quiero evitar que la URL cambie.

probé las siguientes posibilidades

1. quitado el atributo href. no funcionaba, todavía cambia la url a '/'

2. Probado ng-click='deleteUser(user.id, $event)' y $event.preventDefault() en mi deleteUser() - función. No funcionó.

3. Lo que funcionó es un truco que encontré en GitHub sobre un unintended reload.

Esto es como lo hago ahora:

<a ng-click="deleteUser(user.id)" href="javascript:">Delete user</a> 

Pregunta

¿Cuál es el método the'clean' para evitar un enlace desde el cambio de la dirección URL?

Answer 1

El problema real está en el a directive

Así es, cada elemento <a></a> es en realidad una directiva AngularJS.

Parece que soluciona algunos problemas con IE si mira los comentarios en el código.

Pero todo para mí funciona muy bien cuando acabo de eliminar la directiva del código central de AngularJS.

Estaba teniendo el mismo problema que usted e intenté con todas las otras soluciones. La diferencia es que tuve el problema solo en IE.

Si no desea jugar construyendo el script AngularJS desde el origen, simplemente busque htmlAnchorDirective en el archivo angular.js y elimínelo/coméntelo.

Creo que aquí hay un problema mayor que debería abordarse en el núcleo de AngularJS, pero aún no lo he encontrado.

ACTUALIZACIÓN: ¡Esta solución probablemente ya esté desfasada! Deberías intentar usar la última versión de AngularJS.

Answer 2

Siempre he estado haciendo deleteUser ($ event, user.id) y parecía funcionar. Un posible problema sería ordenar las variables a su manejador de clics. El primer argumento probablemente sea el objeto $ event.

Answer 3

Este es sin duda un corte, pero lo hice:

<span class="link" ng-click="deleteUser(user.id)">Delete user</span> 

y en mi css tenían

span.link { 
    /* style like a link */ 
} 

Answer 4

¿Qué es exactamente no funcionó cuando se quita el atributo href? Eso es exactamente lo que debes hacer. Ver este violín para un ejemplo: http://jsfiddle.net/terebentina/SXcQN/

Answer 5

<a ng-click="deleteUser(user.id)" href="">Delete user</a> 

Answer 6

Utilizo mi directiva personalizada para lograr esto. Su mecanismo es operar la directiva ng-click en sí.

angular.module('delete', []) 
.directive('buttonDelete', ['$parse', function ($parse) { 
    var confirmFunc = function (scope, element, attr, event, ngClick) { 
     if (! confirm("Are you sure?")) { 
      event.preventDefault(); 
     } 
     else { 
      // Copy from ngEventDirectives initialization. 
      var fn = $parse(ngClick); 
      scope.$apply(function() { 
       fn(scope, {$event:event}); 
      }); 
     } 
    }; 

    return { 
     restrict: 'C', 
     compile: function (element, attr) { 
      var ngClick = attr.ngClick; 
      attr.ngClick = ''; 

      return { 
       pre: function (scope, element, attr) { 
        element.click(function (e) { 
         confirmFunc(scope, element, attr, e, ngClick); 
        }); 
       } 
      }; 
     } 
    }; 
}]); 

Answer 7

El siguiente funcionó muy bien para mí:

<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a> 

Answer 8

Si nos fijamos en la source code para la directiva a elemento (que es una parte del núcleo angular), se indica en la línea 29 - 31 :

if (!element.attr(href)) { 
    event.preventDefault(); 
} 

Lo que significa que Angular ya está resolviendo el problema de los enlaces sin un href. El único problema que todavía tienes es el problema de CSS. Todavía se puede aplicar el estilo puntero a anclajes que tienen NG-clics, ej .:

a[ng-click] { 
    /* Styles for anchors without href but WITH ng-click */ 
    cursor: pointer; 
} 

Así, incluso se podría hacer su sitio más accesible por marca los vínculos reales con un estilo diferente sutil, entonces enlaces que realizan funciones.

Happy coding!

Answer 9

Como @Justus señaló, si el código fuente es como:

if (!element.attr(href)) { 
    event.preventDefault(); 
} 

Haciendo element.attr(href) como cadena nula'' que debe entrar en la condición if, como !'' evalúa a true. Esa es la solución de @umur