Comment preventDefault sur balises d’ancrage ?

Question

Disons que j’ai une balise d’ancrage tels que

Comment puis-je empêcher le navigateur de naviguer vers # dans AngularJS ?

Answer 1

Selon les docs de ngHref , vous devriez être en mesure d’abandonner le href ou faire href = » ».

Answer 2

Mise à JOUR: depuis, j'ai changé mon avis sur cette solution. Après plus de développement et le temps passé à travailler sur ce, je crois que la meilleure solution à ce problème est de faire ce qui suit:

<a ng-click="myFunction()">Click Here</a>

Et puis mettre à jour votre css d'avoir une règle:

a{
    cursor: pointer;
}

Elle est beaucoup plus simple et offre exactement les mêmes fonctionnalités et est beaucoup plus efficace. Espérons que pourrait être utile à quelqu'un d'autre à la recherche de cette solution dans le futur.

---

Ce qui suit est ma solution précédente, que je suis en partant d'ici, juste pour héritage fins:

Si vous rencontrez ce problème, une simple directive qui permettrait de résoudre ce problème est la suivante:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

Il vérifie toutes les balises d'ancrage (<a></a>) pour voir si leur href de l'attribut est une chaîne vide ("") ou une table de hachage ('#') ou il y a un ng-click affectation. S'il en trouve une de ces conditions, il attire l'événement et empêche le comportement par défaut.

Le seul inconvénient est qu'il fonctionne de cette directive, pour toutes les balises d'ancrage. Donc, si vous avez beaucoup d'ancre de tags sur la page et que vous souhaitez seulement à prévenir le comportement par défaut pour un petit nombre d'entre eux, alors cette directive n'est pas très efficace. Cependant, je suis presque toujours le souhaitez preventDefault, j'ai donc utiliser cette directive dans mon AngularJS apps.

Answer 3

Vous pouvez passer l’objet $event à votre méthode et appeler `` à ce sujet, afin que le traitement par défaut ne se produira pas :

Answer 4

Je préfère utiliser les directives pour ce genre de chose. Voici un exemple

<a href="#" ng-click="do()" eat-click>Click Me</a>

Et la directive de code pour eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

Maintenant, vous pouvez ajouter l' eat-click attribuer à un élément et il obtiendra preventDefault()'ed automatiquement.

Avantages:

1. Vous n'avez pas à passer le laid $event votre objet dans votre do() fonction.
2. Votre manette est plus l'unité vérifiable, car il n'a pas besoin d'écraser l' $event .objet

Answer 5

Bien que Renaud a donné une excellente solution

J’ai personnellement trouvé que vous devez également $event.stopPropagation() dans certains cas d’éviter certains des effets secondaires

sera ma solution