Comment prévenirDefault sur les balises d’ancrage?

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

Click 

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

    MISE À JOUR : J’ai depuis lors changé d’avis sur cette solution. Après plus de développement et de temps passé à travailler là-dessus, je pense qu’une meilleure solution à ce problème consiste à faire ce qui suit:

     Click Here 

    Et puis mettez à jour votre css pour avoir une règle supplémentaire:

     a[ng-click]{ cursor: pointer; } 

    C’est beaucoup plus simple et fournit exactement les mêmes fonctionnalités et est beaucoup plus efficace. J’espère que cela pourrait être utile à quiconque recherchant cette solution à l’avenir.


    Voici ma solution précédente, que je laisse ici uniquement à des fins héritées:

    Si vous rencontrez souvent ce problème, une directive simple pour résoudre ce problème est la suivante:

     app.directive('a', function() { return { ressortingct: '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 ( ) pour voir si leur atsortingbut href est une chaîne vide ( "" ) ou un hachage ( '#' ) ou s’il existe une affectation ng-click . S’il trouve l’une de ces conditions, il intercepte l’événement et empêche le comportement par défaut.

    Le seul inconvénient est qu’il exécute cette directive pour toutes les balises d’ancrage. Donc, si vous avez beaucoup de balises d’ancrage sur la page et que vous souhaitez uniquement empêcher le comportement par défaut pour un petit nombre d’entre elles, cette directive n’est pas très efficace. Cependant, je veux presque toujours preventDefault , donc j’utilise cette directive partout dans mes applications AngularJS.

    Selon les documents de ngHref, vous devriez pouvoir laisser le href ou do href = “”.

     
    link 1 (link, don't reload)
    link 2 (link, don't reload)
    anchor (link, don't reload)
    anchor (no link)

    Vous pouvez transmettre l’object $ event à votre méthode et appeler $event.preventDefault() pour que le traitement par défaut ne se produise pas:

     Click // then in your controller.do($event) method $event.preventDefault() 

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

     Click Me 

    Et le code de la directive pour eat-click :

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

    Maintenant, vous pouvez append l’atsortingbut eat-click à n’importe quel élément et il obtiendra preventDefault() .

    Avantages:

    1. Vous n’avez pas besoin de passer l’object d’ $event laid dans votre fonction do() .
    2. Votre contrôleur est plus contrôlable par unité car il n’a pas besoin d’exclure l’object $event

    Bien que Renaud ait donné une excellente solution

     Click 

    Personnellement, je trouve que vous avez également besoin de $ event.stopPropagation () pour éviter certains effets secondaires

      Click 

    sera ma solution

     ng-click="$event.preventDefault()" 

    La solution la plus simple que j’ai trouvée est celle-ci:

     Click 

    Donc, en lisant ces réponses, @Chris a toujours la réponse la plus “correcte”, je suppose, mais elle a un problème, elle ne montre pas le “pointeur” ….

    Donc, voici deux manières de résoudre ce problème sans avoir à append un curseur: style de pointeur:

    1. Utilisez javascript:void(0) au lieu de # :

       Do Something 
    2. Utilisez $event.preventDefault() dans la directive ng-click (afin de ne pas ranger votre contrôleur avec des références liées au DOM):

       Do Something 

    Personnellement, je préfère le premier au second. javascript:void(0) a d’autres avantages qui sont discutés ici . Il y a également une discussion sur le “JavaScript discret” dans ce lien qui est effroyablement récent et ne s’applique pas nécessairement directement à une application angular.

    Vous pouvez faire comme suit

    1.Retirez l’atsortingbut href de la balise anchor ( a )

    2.Définissez le curseur du pointeur sur css pour créer des éléments de clic

      [ng-click], [data-ng-click], [x-ng-click] { cursor: pointer; } 

    HTML

    ici angularjs pure: près de la fonction ng-click, vous pouvez écrire la fonction preventDefault () en séparant le point-virgule

     Click me 

    JS

     $scope.do = function() { alert("do here anything.."); } 

    (ou)

    vous pouvez procéder de cette façon, cela a déjà été discuté ici.

    HTML

     Click me 

    JS

     $scope.do = function(event) { event.preventDefault(); event.stopPropagation() } 

    Essayez cette option que je peux voir n’est pas encore listée ci-dessus:

     Click 

    Puisque vous créez une application Web, pourquoi avez-vous besoin de liens?

    Échangez vos ancres sur des boutons!

      

    si toujours pertinent:

      ... scope.unselect = function( event ) { event.preventDefault(); event.stopPropagation(); } ... 

    J’irais avec:

     Click 
    • car selon les docs vous devriez pouvoir partir du href et puis Angular se chargera de la prévention par défaut pour vous!

    Entièrement cela empêche que les choses par défaut m’aient dérouté, alors j’ai créé un JSFiddle qui illustre quand et où Angular empêche les défauts .

    Le JSFiddle utilise une directive d’Angular – il devrait donc être EXACTEMENT identique. Vous pouvez voir le code source ici: un code source de tag

    J’espère que cela aidera à clarifier certains.

    J’aurais aimé poster le doc à ngHref mais je ne peux pas à cause de ma réputation.

    C’est ce que je fais toujours. Fonctionne comme un charme!

     Click 

    Le moyen le plus sûr d’éviter les événements sur un href serait de le définir comme

      

    Ou si vous avez besoin en ligne, vous pouvez le faire:

     Click to show 

    Beaucoup de réponses semblent exagérées. POUR MOI, cela fonctionne

      {{question.Verbiage}} 

    J’ai besoin d’une présence de la valeur de l’atsortingbut href pour la dégradation (lorsque js est désactivé), donc je ne peux pas utiliser l’atsortingbut href vide (ou “#”), mais le code ci-dessus n’a pas fonctionné. e) variable. J’ai créé ma propre directive:

     angular.module('MyApp').directive('clickPrevent', function() { return function(scope, element, attrs) { return element.on('click', function(e) { return e.preventDefault(); }); }; }); 

    En HTML:

     Sign up 

    Emprunter de la réponse de tennisgent. J’aime que vous n’ayez pas à créer une directive personnalisée à append sur tous les liens. Cependant, je ne pouvais pas le faire travailler dans IE8. Voici ce qui a finalement fonctionné pour moi (en utilisant angular 1.0.6).

    Notez que ‘bind’ vous permet d’utiliser jqLite fourni par angular, donc pas besoin d’envelopper avec jQuery complet. Également requirejs la méthode stopPropogation.

     .directive('a', [ function() { return { ressortingct: 'E', link: function(scope, elem, attrs) { elem.bind('click', function(e){ if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){ e.preventDefault(); e.stopPropagation(); } }) } }; } ]) 

    J’ai rencontré ce même problème en utilisant des ancres pour un dropstrap angular déroulant. La seule solution que j’ai trouvée qui évitait les effets secondaires indésirables (c.-à-d. Que le menu déroulant ne se fermait pas à cause de l’utilisation de preventDefault ()) consistait à utiliser les éléments suivants:

      Click 

    si vous ne voulez jamais aller à href … vous devez changer votre balisage et utiliser un bouton, pas une balise d’ancrage, car sémantiquement, ce n’est pas une ancre ou un lien. Inversement, si vous avez un bouton qui effectue des vérifications puis redirige, il devrait s’agir d’une balise link / anchor et non d’un bouton … pour le référencement, ainsi que pour tester [insérer une suite de tests ici].

    pour les liens que vous souhaitez uniquement redirect de manière conditionnelle, par exemple inviter à enregistrer les modifications, ou reconnaître l’état incorrect … vous devez utiliser ng-click = “someFunction ($ event)” et someFunction sur validationError preventDefault et ou stopPropagation.

    aussi juste parce que vous le pouvez ne signifie pas que vous devriez . javascript: void (0) a bien fonctionné dans le passé … mais à cause des navigateurs malveillants, les hackers / crackers affichent les applications / sites utilisant javascript dans un href … ne voyez aucune raison de dactylographier ci-dessus ..

    il est 2016 depuis 2010 ne devrait pas être une raison quelconque pour utiliser des liens qui agissent comme des boutons … si vous devez encore prendre en charge IE8 et ci-dessous, vous devez réévaluer votre lieu de travail.

     /* NG CLICK PREVENT DEFAULT */ app.directive('ngClick', function () { return { link: function (scope, element, atsortingbutes) { element.click(function (event) { event.preventDefault(); event.stopPropagation(); }); } }; }); 

    Ce que vous devez faire, c’est de supprimer complètement l’atsortingbut href .

    Si vous regardez le code source de la directive a element (qui fait partie du kernel angular), il indique à la ligne 29 – 31:

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

    Ce qui signifie qu’Angular est déjà en train de résoudre le problème des liens sans href. Le seul problème que vous avez encore est le problème css. Vous pouvez toujours appliquer le style de pointeur aux ancres ayant des clics ng, par exemple:

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

    Ainsi, vous pouvez même rendre votre site plus accessible en marquant des liens réels avec un style subtil et différent, puis des liens qui exécutent des fonctions.

    Heureux codage!

    Vous pouvez désactiver la redirection d’URL dans le mode Html5Mode de $ location pour atteindre l’objective. Vous pouvez le définir dans le contrôleur spécifique utilisé pour la page. Quelque chose comme ça:

     app.config(['$locationProvider', function ($locationProvider) { $locationProvider.html5Mode({ enabled: true, rewriteLinks: false, requireBase: false }); }]); 

    Une alternative pourrait être:

     Click