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'attribut href est prioritaire sur ng-click.
Je cherche 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 button si vous n'avez pas besoin d'un uri.
Cet exemple du site de documentation angular ne fait que href sans même l'assigner à une chaîne vide:
[<a href ng-click="colors.splice($index, 1)">X</a>]
Vous pouvez simplement empêcher le comportement par défaut de l'événement click directement dans votre modèle.
<a href="#" ng-click="$event.preventDefault();logout()" />
Selon le documentation angulaire ,
Des directives comme 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>
c'est-à-dire qu'il suffit de supprimer le # de l'attribut href
Juste un autre indice. Si vous avez besoin d'une véritable URL (pour prendre en charge l'accessibilité du navigateur), vous pouvez procéder comme suit:
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 une chance de s'exécuter avant de naviguer vers le lien.
Dans Angular, <a>s sont des directives . Ainsi, si vous avez un href ou aucun href vide, 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 scénario manquant href.
Cela a fonctionné pour moi dans IE 9 et AngularJS v1.0.7:
<a href="javascript:void(0)" ng-click="logout()">Logout</a>
Merci à commentaire de duckeggs pour la solution de travail!
Il y a tellement de réponses à cette question ici, mais il semble y avoir un peu de confusion sur ce qui se passe réellement ici.
Tout d'abord, votre prémisse
"href remplace ng-click dans Angular.js"
est faux. En réalité, après votre clic, l'événement click est d'abord traité par angular (défini par la directive ng-click dans angular 1.x et par click sur angular 2. x +) puis continue de se propager (ce qui finit par amener le navigateur à accéder à l’URL définie avec l’attribut href). (Voir this pour en savoir plus sur la propagation d’événements dans javascript)
Si vous souhaitez éviter cela, vous devez annuler la propagation de l'événement à l'aide de la méthode La méthode preventDefault() de l'interface événement :
<a href="#" ng-click="$event.preventDefault();logout()" />
(Ceci est une fonctionnalité javascript pure et rien à voir avec angular)
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 de mettre votre logique dans votre contrôleur angular. Donc, un meilleur moyen serait
<a href="#" ng-click="logout($event)" />
Et dans votre méthode de déconnexion ():
logout($event) {
$event.preventDefault();
...
}
L'événement de clic n'atteindra pas le navigateur. Il ne tentera donc pas de charger le lien pointé par href. (Notez toutefois que si l'utilisateur clique avec le bouton droit de la souris sur le lien et l'ouvre directement, il n'y aura aucun événement click. Au lieu de cela, il chargera directement l'URL pointée par l'attribut href.)
En ce qui concerne les commentaires sur la couleur du lien visité dans les navigateurs. Encore une fois, cela n’a rien à voir avec angular, si votre href="..." pointe sur une URL visitée par votre navigateur par défaut, la couleur du lien sera différente. Ceci est contrôlé par CSS: Selector visité , vous pouvez modifier votre css pour redéfinir ce comportement:
a {
color:pink;
}
PS1 :
Certaines réponses suggèrent d'utiliser:
<a href .../>
href est une directive angular. Lorsque votre modèle est traité par angular, il sera converti en
<a href="" .../>
Ces deux manières sont essentiellement les mêmes.
Il suffit d'écrire ng-click avant href .. Cela a fonctionné pour moi
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" 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 ayez besoin de supprimer "#" de href. Les travaux suivants avec Angularjs 1.2.10
<a href="#/" ng-click="logout()">Logout</a>
Vous pouvez aussi essayer ceci:
<div ng-init="myVar = 'www.thesoftdesign'">
<h1>Tutorials</h1>
<p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
//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>
Ça marche pour moi
<a href (click)="logout()">
<i class="icon-power-off"></i>
Logout
</a>
Avez-vous essayé de rediriger à l'intérieur de la fonction de déconnexion elle-même? Par exemple, supposons que votre fonction de déconnexion soit la suivante
$scope.logout = function()
{
$scope.userSession = undefined;
window.location = "http://www.yoursite.com/#"
}
Ensuite, vous pouvez juste avoir
<a ng-click="logout()">Sign out</a>
Je vais ajouter pour vous un exemple qui fonctionne pour moi et vous pouvez le changer à votre guise.
J'ajoute le code ci-dessous dans mon contrôleur.
$scope.showNumberFct = function(){
alert("Work!!!!");
}
et pour ma page de vue j'ajoute le code ci-dessous.
<a href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</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..");
}