href remplace ng-click dans Angular.js

Lorsque les deux attributs href et ng-click sont définis:

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

l' hrefattribut est prioritaire sur ng-click.

Je recherche un moyen d'augmenter la priorité de ng-click.

href est requis pour Twitter Bootstrap, je ne peux pas le supprimer.

Vous devriez probablement simplement utiliser une balise de bouton si vous n'avez pas besoin d'un uri.

Cet exemple du site de documentation angulaire se fait hrefsans même l'attribuer à une chaîne vide:

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

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

Vous pouvez simplement empêcher le comportement par défaut de l'événement de clic directement dans votre modèle.

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

Selon la documentation angulaire ,

Des directives telles que ngClick et ngFocus exposent un objet $ event dans la portée de cette expression.

Voici une autre solution:

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

ie Supprimez simplement le # de l'attribut href

Encore un indice. Si vous avez besoin d'une URL réelle (pour prendre en charge l'accessibilité du navigateur), vous pouvez effectuer les opérations suivantes:

modèle:

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

directif:

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

De cette façon, votre code dans linkClicked () aura la possibilité de s'exécuter avant de naviguer vers le lien

Dans Angular, les <a>s sont des directives . En tant que tel, si vous avez un vide hrefou non href, Angular appellera event.preventDefault.

De la source :

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

Voici un plnkr démontrant le hrefscénario manquant .

Cela a fonctionné pour moi dans IE 9 et AngularJS v1.0.7:

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

Merci au commentaire de duckeggs pour la solution de travail!

Il y a tellement de réponses à cette question ici, mais il semble qu'il y ait un peu de confusion sur ce qui se passe réellement ici.

Premièrement, votre prémisse

"href remplace ng-click dans Angular.js"

est faux. Ce qui se passe réellement, c'est qu'après votre clic, l'événement de clic est d'abord géré par angular (défini par la ng-clickdirective en angular 1.x et clicken angular 2.x +), puis il continue à se propager (ce qui déclenche finalement le navigateur pour naviguer vers le url définie avec l' hrefattribut) (voir ceci pour en savoir plus sur la propagation d'événements en javascript)

Si vous souhaitez éviter cela, vous devez annuler la propagation de l'événement à l'aide de la méthode de l'interface The EventpreventDefault() :

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

(Ceci est une fonctionnalité javascript pure et n'a rien à voir avec angular)

Maintenant, cela résoudra déjà votre problème mais ce n'est pas la solution optimale. Angular, à juste titre, favorise le modèle MVC . Avec cette solution, votre modèle html est mélangé à la logique javascript. Vous devriez essayer d'éviter cela autant que possible et mettre votre logique dans votre contrôleur angulaire. Donc, une meilleure façon serait

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

Et dans votre méthode logout ():

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

Maintenant, l'événement de clic n'atteindra pas le navigateur, il n'essaiera donc pas de charger le lien pointé par href. (Cependant, notez que si l'utilisateur clique avec le bouton droit sur le lien et ouvre directement le lien, il n'y aura pas du tout d'événement de clic. Au lieu de cela, il chargera directement l'URL pointée par l' hrefattribut.)

Concernant les commentaires sur la couleur des liens visités dans les navigateurs. Encore une fois, cela n'a rien à voir avec angulaire, si href="..."votre navigateur pointe vers une URL visitée par défaut, la couleur du lien sera différente. Ceci est contrôlé par CSS: visité Selector , vous pouvez modifier votre css pour remplacer ce comportement:

a {
   color:pink;
}

PS1 :

Certaines réponses suggèrent d'utiliser:

<a href .../>

hrefest une directive angulaire. Lorsque votre modèle est traité par angulaire, il sera converti en

<a href="" .../>

Ces deux moyens sont essentiellement les mêmes.

Écrivez juste ng-click avant href .. cela a fonctionné pour moi

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

Je ne pense pas que vous deviez supprimer "#" de href. Travaux suivants avec Angularjs 1.2.10

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

Vous pouvez également essayer ceci:

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

Je vais ajouter pour vous un exemple qui fonctionne pour moi et vous pouvez le modifier à votre guise.

J'ajoute le code ci-dessous dans mon contrôleur.

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

et pour ma page d'affichage, j'ajoute le code ci-dessous.

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

Avez-vous essayé de rediriger à l'intérieur de la fonction de déconnexion elle-même? Par exemple, disons que votre fonction de déconnexion est la suivante

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

Alors tu peux juste avoir

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

S'il te plaît, vérifie cela

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

Cela fonctionne pour moi

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