href l'emporte sur ng-click en angle.js
lorsque les deux attributs HREF et ng-click sont définis:
<a href="#" ng-click="logout()">Sign out</a>
l'attribut href a priorité sur ng-click.
je cherche un moyen d'augmenter la priorité de ng-click.
href est nécessaire pour Bootstrap Twitter, Je ne peux pas l'enlever.
15 réponses
vous devriez probablement juste utiliser une étiquette de bouton si vous n'avez pas besoin d'un uri.
cet exemple du site de documentation angulaire 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 de clic directement dans votre modèle.
<a href="#" ng-click="$event.preventDefault();logout()" />
Par le angulaire de la documentation ,
Les Directivescomme ngClick et ngFocus exposent un objet $event dans le cadre de cette expression.
Voici une autre solution:
<a href="" ng-click="logout()">Sign out</a>
i.e. il suffit de supprimer le # de l'attribut href
encore un indice. Si vous avez besoin de L'URL réelle (pour soutenir l'accessibilité du navigateur), vous pouvez faire ce qui suit:
modèle:
<a ng-href="{{link}}" ng-click="$event.preventDefault(); linkClicked(link)">{{link}}</a>
directive:
$scope.linkClicked = function(link){
// your code here
$location.path(link);
};
de cette façon, votre code dans linkClicked() aura la chance de s'exécuter avant de naviguer vers le lien
en angle, <a> s sont des directives . Par conséquent , si vous avez un href ou un 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 suffit d'écrire ng-click avant href ..il 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>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.
tout D'abord, votre prémisse
"href remplace ng-cliquez sur Angulaire.js "
est faux. Ce qui se passe réellement est qu'après votre clic, l'événement de clic est d'abord manipulé par angulaire(défini par la directive ng-click dans angulaire 1.x et click en angle 2.x+) et ensuite il continue à se propager(ce qui déclenche éventuellement le navigateur pour naviguer à l'url définie avec href attribut).(Voir ce pour en savoir plus sur la propagation de l'évènement en javascript)
si vous voulez éviter cela, alors vous devriez annuler la propagation de l'événement en utilisant la méthode de l'interface D'événement preventDefault() :
<a href="#" ng-click="$event.preventDefault();logout()" />
(C'est la fonctionnalité javascript pure et rien à voir avec angular)
Maintenant, ce sera déjà résoudre votre problème, mais ce n'est pas la solution optimale. Angular, à juste titre, favorise le MVC pattern . 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, de sorte qu'il n'essayera pas de charger le lien pointé par href . (Notez cependant que si l'utilisateur clique droit sur le lien et ouvre directement le lien, alors il n'y aura pas d'événement de clic du tout. Au lieu de cela, il chargera directement l'url pointée par l'attribut href .)
concernant les commentaires sur la couleur du lien visité dans les navigateurs. A nouveau, il existe rien à voir avec angular, si votre href="..." pointe vers une url consultée par votre navigateur par défaut, la couleur du lien sera différente. Ceci est contrôlé par CSS: sélecteur visité , vous pouvez modifier votre css pour outrepasser ce comportement:
a {
color:pink;
}
PS1 :
Certaines réponses suggèrent d'utiliser:
<a href .../>
href est une directive angulaire. Lorsque votre modèle est traité par angulaire ce sera converti en
<a href="" .../>
ces deux voies sont essentiellement les mêmes.
je ne pense pas que vous avez besoin pour enlever le "#" de href. Travaux ultérieurs 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>
je vais ajouter pour vous un exemple qui fonctionne pour moi et vous pouvez le changer comme vous voulez.
j'ajoute le code bellow 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>
avez-vous essayé la redirection à l'intérieur de la fonction de déconnexion elle-même? Par exemple, disons que votre fonction de déconnexion est comme suit:
$scope.logout = function()
{
$scope.userSession = undefined;
window.location = "http://www.yoursite.com/#"
}
alors vous pouvez juste avoir
<a ng-click="logout()">Sign out</a>
s'il vous Plaît vérifier cette
<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>