href sostituisce ng-click in Angular.js

Quando sono definiti entrambi gli attributi href e ng-click:

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

l' hrefattributo ha la precedenza su ng-click.

Sto cercando un modo per aumentare la priorità di ng-click.

href è richiesto per Twitter Bootstrap, non posso rimuoverlo.

Probabilmente dovresti usare solo un tag button se non hai bisogno di un uri.

Questo esempio dal sito di documentazione angolare fa solo hrefsenza nemmeno assegnarlo a una stringa vuota:

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

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

Puoi semplicemente impedire il comportamento predefinito dell'evento clic direttamente nel tuo modello.

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

Per la documentazione angolare ,

Direttive come ngClick e ngFocus espongono un oggetto $ event nell'ambito di tale espressione.

Ecco un'altra soluzione:

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

cioè rimuovi semplicemente il # dall'attributo href

Solo un altro suggerimento. Se hai bisogno di un URL reale (per supportare l'accessibilità del browser) puoi fare quanto segue:

modello:

<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>

direttiva:

$scope.linkClicked = function(link){
    // your code here
    $location.path(link);
};

In questo modo il tuo codice in linkClicked () avrà la possibilità di essere eseguito prima di navigare al link

In Angular, le <a>s sono direttive . In quanto tale, se hai un vuoto hrefo no href, Angular chiamerà event.preventDefault.

Dalla fonte :

    element.on('click', function(event){
      // if we have no href url, then don't navigate anywhere.
      if (!element.attr(href)) {
        event.preventDefault();
      }
    });

Ecco un plnkr che mostra lo hrefscenario mancante .

Questo ha funzionato per me in IE 9 e AngularJS v1.0.7:

<a href="javascript:void(0)" ng-click="logout()">Logout</a>

Grazie al commento di duckeggs per la soluzione funzionante!

Ci sono così tante risposte a questa domanda qui, ma sembra che ci sia un po 'di confusione su ciò che sta realmente accadendo qui.

In primo luogo, la tua premessa

"href sostituisce ng-click in Angular.js"

è sbagliato. Quello che sta effettivamente accadendo è che dopo il tuo clic, l'evento di clic viene prima gestito da angular (definito dalla ng-clickdirettiva in angular 1.x e clickin angular 2.x +) e quindi continua a propagarsi (il che alla fine fa sì che il browser navighi al URL definito con l' hrefattributo) (vedere questo per ulteriori informazioni sulla propagazione degli eventi in javascript)

Se vuoi evitarlo, dovresti annullare la propagazione dell'evento utilizzando il metodo dell'interfaccia The EventpreventDefault() :

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

(Questa è pura funzionalità javascript e non ha nulla a che fare con angolare)

Ora, questo risolverà già il tuo problema ma questa non è la soluzione ottimale. Angular, giustamente, promuove il pattern MVC . Con questa soluzione, il tuo template html viene mischiato con la logica javascript. Dovresti cercare di evitarlo il più possibile e inserire la tua logica nel tuo controller angolare. Quindi sarebbe un modo migliore

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

E nel tuo metodo logout ():

logout($event) {
   $event.preventDefault();
   ...
}

Ora l'evento clic non raggiungerà il browser, quindi non tenterà di caricare il collegamento indicato da href. (Tuttavia, tieni presente che se l'utente fa clic con il pulsante destro del mouse sul collegamento e apre direttamente il collegamento, non ci sarà affatto un evento di clic. Invece caricherà direttamente l'URL indicato dall'attributo href.)

Per quanto riguarda i commenti sul colore dei collegamenti visitati nei browser. Anche in questo caso questo non ha nulla a che fare con angolare, se href="..."per impostazione predefinita punti a un URL visitato dal browser, il colore del collegamento sarà diverso. Questo è controllato da CSS: selezionato Selector , puoi modificare il tuo CSS per sovrascrivere questo comportamento:

a {
   color:pink;
}

PS1 :

Alcune risposte suggeriscono di utilizzare:

<a href .../>

hrefè una direttiva angolare. Quando il tuo modello viene elaborato da angular, questo verrà convertito in

<a href="" .../>

Questi due modi sono essenzialmente gli stessi.

Basta scrivere ng-click prima di href .. Ha funzionato per me

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

Non penso sia necessario rimuovere "#" da href. In seguito funziona con Angularjs 1.2.10

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

Puoi anche provare questo:

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>

Aggiungo per te un esempio che funziona per me e puoi cambiarlo come vuoi.

Aggiungo il seguente codice all'interno del mio controller.

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

e per la mia pagina di visualizzazione aggiungo il codice qui sotto.

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

Hai provato a reindirizzare all'interno della funzione di logout stessa? Ad esempio, supponiamo che la tua funzione di logout sia la seguente

$scope.logout = function()
{
  $scope.userSession = undefined;
  window.location = "http://www.yoursite.com/#"
}

Allora puoi semplicemente avere

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

Per favore controlla questo

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

Questo funziona per me

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