Come prevenire Default sui tag di ancoraggio?

Diciamo che ho un tag di ancoraggio come

Click 

Come posso impedire al browser di passare a # in AngularJS ?

AGGIORNAMENTO : Da allora ho cambiato idea su questa soluzione. Dopo un ulteriore sviluppo e il tempo trascorso a lavorare su questo, credo che una soluzione migliore a questo problema è quella di fare quanto segue:

 Click Here 

E poi aggiorna il tuo css per avere una regola in più:

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

È molto più semplice e fornisce la stessa identica funzionalità ed è molto più efficiente. Spero che possa essere utile a chiunque altro cerchi questa soluzione in futuro.


La seguente è la mia precedente soluzione, che sto lasciando qui solo per scopi legacy:

Se stai riscontrando molto questo problema, una semplice direttiva che risolverà questo problema è la seguente:

 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(); }); } } }; }); 

Controlla tutti i tag di ancoraggio ( ) per vedere se il loro attributo href è una stringa vuota ( "" ) o un hash ( '#' ) o c’è un’assegnazione di ng-click . Se trova una di queste condizioni, rileva l’evento e impedisce il comportamento predefinito.

L’unico lato negativo è che esegue questa direttiva per tutti i tag di ancoraggio. Pertanto, se nella pagina sono presenti molti tag di ancoraggio e si desidera solo impedire il comportamento predefinito per un numero limitato di essi, questa direttiva non è molto efficiente. Tuttavia, quasi sempre desidero preventDefault , quindi uso questa direttiva dappertutto nelle mie app AngularJS.

Secondo i documenti per ngHref dovresti essere in grado di lasciare href o do href = “”.

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

È ansible passare l’object $ event al metodo e chiamare $event.preventDefault() su di esso, in modo che l’elaborazione predefinita non si verifichi:

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

Preferisco usare le direttive per questo genere di cose. Ecco un esempio

 Click Me 

E il codice di direttiva per eat-click :

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

Ora puoi aggiungere l’attributo eat-click a qualsiasi elemento e otterrà preventDefault() ‘ed automagicamente.

Benefici:

  1. Non devi passare il brutto object $event alla tua funzione do() .
  2. Il tuo controller è più unità testabile perché non ha bisogno di spegnere l’object $event

Anche se Renaud ha dato una grande soluzione

 Click 

Personalmente ho trovato che hai anche bisogno di $ event.stopPropagation () in alcuni casi per evitare alcuni degli effetti collaterali

  Click 

sarà la mia soluzione

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

La soluzione più semplice che ho trovato è questa:

 Click 

Quindi, leggendo queste risposte, @Chris ha ancora la risposta più “corretta”, suppongo, ma ha un problema, non mostra il “puntatore” ….

Quindi ecco due modi per risolvere questo problema senza dover aggiungere un cursore: stile puntatore:

  1. Usa javascript:void(0) invece di # :

     Do Something 
  2. Utilizzare $event.preventDefault() nella direttiva ng-click (in modo da non spazzare il controller con riferimenti a DOM):

     Do Something 

Personalmente preferisco il primo al secondo. javascript:void(0) ha altri vantaggi che sono discussi qui . C’è anche la discussione di “JavaScript non invadente” in quel collegamento che è spaventosamente recente, e non necessariamente si applica direttamente ad un’applicazione angular.

Puoi fare come segue

1. href attributo href dal tag anchor ( a )

2.Impostare il cursore del puntatore negli elementi di clic da css a ng

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

HTML

qui puro angularjs: vicino alla funzione ng-click puoi scrivere la funzione preventDefault () separando il punto e virgola

 Click me 

JS

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

(o)

puoi procedere in questo modo, questo è già discusso qui.

HTML

 Click me 

JS

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

Prova questa opzione che posso vedere non è ancora elencata sopra:

 Click 

Dal momento che stai creando un’app web perché hai bisogno di collegamenti?

Scambia le tue ancore ai bottoni!

  

se ancora rilevanti:

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

Vorrei andare con:

 Click 
  • perché secondo i documenti dovresti essere in grado di lasciare l’href e quindi Angular gestirà il default di prevenzione per te!

Tutto questo previene la cosa di default mi ha confuso, quindi ho creato un JSFiddle che illustra quando e dove Angular sta impedendo il default .

JSFiddle usa la direttiva di Angular – quindi dovrebbe ESATTAMENTE essere la stessa. Puoi vedere il codice sorgente qui: un codice sorgente di tag

Spero che questo possa aiutare a chiarire alcuni.

Mi sarebbe piaciuto postare il documento su ngHref ma non posso a causa della mia reputazione.

Questo è quello che faccio sempre. Funziona come un fascino!

 Click 

Il modo più sicuro per evitare eventi su un href sarebbe definirlo come

  

O se hai bisogno di una linea, allora puoi farlo:

 Click to show 

Molte risposte sembrano essere eccessive. PER ME, questo funziona

  {{question.Verbiage}} 

Ho bisogno di una presenza del valore dell’attributo href per la degradazione (quando js è spento), quindi non posso usare l’attributo href vuoto (o “#”), ma il codice sopra non ha funzionato per me, perché ho bisogno di un evento ( e) variabile. Ho creato la mia direttiva:

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

In HTML:

 Sign up 

Prendendo in prestito la risposta di tennisgent. Mi piace il fatto che non devi creare una direttiva personalizzata da aggiungere su tutti i link. Tuttavia, non ho potuto farlo lavorare su IE8. Ecco cosa ha funzionato per me (usando l’angular 1.0.6).

Si noti che ‘bind’ consente di utilizzare jqLite fornito da angular, quindi non è necessario eseguire il wrapping con jQuery completo. Richiesto anche il metodo stopPropogation.

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

Mi sono imbattuto in questo stesso problema quando si usano ancore per un dropstrap angular verso il basso. L’unica soluzione che ho trovato che evitava effetti collaterali indesiderati (ad esempio il menu a tendina che non si chiudeva a causa dell’uso di preventDefault ()) consisteva nell’usare quanto segue:

  Click 

se non vuoi mai andare in href … dovresti cambiare il tuo markup e usare un pulsante non un tag di ancoraggio perché semanticamente non è un’ancora o un link. Inversamente se hai un pulsante che esegue alcuni controlli e poi reindirizza dovrebbe essere un link / anchor tag e non un pulsante … per scopi SEO e test [inserisci qui la suite di test].

per i collegamenti che si desidera redirect in modo condizionale come il prompt per salvare le modifiche o riconoscere lo stato dirty … è necessario utilizzare ng-click = “someFunction ($ event)” e in someFunction sul validationError preventDefault e / stopPropagation.

anche solo perché puoi non significa che dovresti . javascript: void (0) ha funzionato bene nel corso della giornata … ma a causa dei nefandi hacker / cracker i browser segnalano app / siti che utilizzano javascript all’interno di un href … non vedo alcun motivo per il tipo di anatra sopra ..

è il 2016 dal 2010 non dovrebbe essere un motivo per cui usare link che fungono da pulsanti … se devi ancora supportare IE8 e sotto devi rivalutare la tua sede.

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

Quello che dovresti fare è omettere completamente l’attributo href .

Se si guarda il codice sorgente per la direttiva di a elemento (che è una parte del nucleo angular), si afferma alla riga 29 – 31:

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

Ciò significa che Angular sta già risolvendo il problema dei collegamenti senza un href. L’unico problema che hai ancora è il problema css. Puoi ancora applicare lo stile del puntatore alle ancore che hanno ng-clic, ad esempio:

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

Quindi, potresti persino rendere più accessibile il tuo sito contrassegnando link reali con uno stile sottile e diverso, quindi link che eseguono funzioni.

Buona programmazione!

È ansible disabilitare il reindirizzamento dell’URL all’interno di Html5Mode di $ location per raggiungere l’objective. È ansible definirlo all’interno del controller specifico utilizzato per la pagina. Qualcosa come questo:

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

Un’alternativa potrebbe essere:

 Click