href überschreibt ng-click in Angular.js

Wenn beide href- und ng-click-Attribute definiert sind:

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

Das hrefAttribut hat Vorrang vor ng-click.

Ich suche nach einer Möglichkeit, die Priorität von ng-click zu erhöhen.

href wird für Twitter Bootstrap benötigt, ich kann es nicht entfernen.

Sie sollten wahrscheinlich nur ein Button-Tag verwenden, wenn Sie keinen Uri benötigen.

In diesem Beispiel von der Website für eckige Dokumentation müssen hrefSie es nur einer leeren Zeichenfolge zuweisen:

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

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

Sie können das Standardverhalten des Klickereignisses einfach direkt in Ihrer Vorlage verhindern.

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

Per den Winkellagen ,

Anweisungen wie ngClick und ngFocus machen ein $ event-Objekt im Rahmen dieses Ausdrucks verfügbar.

Hier ist eine andere Lösung:

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

dh einfach das # aus dem href-Attribut entfernen

Nur noch ein Hinweis. Wenn Sie eine echte URL benötigen (um die Zugänglichkeit des Browsers zu unterstützen), können Sie Folgendes tun:

Vorlage:

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

Richtlinie:

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

Auf diese Weise kann Ihr Code in linkClicked () ausgeführt werden, bevor Sie zum Link navigieren

In Angular sind <a>s Direktiven . Wenn Sie eine leere hrefoder keine haben href, ruft Angular an event.preventDefault.

Aus der Quelle :

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

Hier ist ein Plnkr , der das fehlende hrefSzenario demonstriert .

Dies funktionierte für mich in IE 9 und AngularJS v1.0.7:

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

Vielen Dank an duckeggs 'Kommentar für die funktionierende Lösung!

Es gibt hier so viele Antworten auf diese Frage, aber es scheint ein wenig Verwirrung darüber zu geben, was hier tatsächlich vor sich geht.

Erstens Ihre Prämisse

"href überschreibt ng-click in Angular.js"

ist falsch. Was tatsächlich passiert, ist, dass das Klickereignis nach dem Klicken zuerst von eckig (definiert durch die ng-clickDirektive in eckigem 1.x und clickin eckigem 2.x +) behandelt wird und sich dann weiter ausbreitet (was den Browser schließlich dazu veranlasst, zu navigieren) URL mit hrefAttribut definiert ). (Siehe dies zur Ereignisverbreitung in Javascript finden Sie hier)

Wenn Sie dies vermeiden wollen, dann sollten Sie die Ereignispropagierung mit der abbrechen Event - Schnittstelle des preventDefault()Verfahrens :

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

(Dies ist reine Javascript-Funktionalität und hat nichts mit Winkel zu tun.)

Dies wird Ihr Problem bereits lösen, aber dies ist nicht die optimale Lösung. Angular fördert zu Recht das MVC-Muster . Bei dieser Lösung wird Ihre HTML-Vorlage mit der Javascript-Logik gemischt. Sie sollten versuchen, dies so weit wie möglich zu vermeiden und Ihre Logik in Ihren Winkelregler zu integrieren. Ein besserer Weg wäre also

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

Und in Ihrer logout () -Methode:

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

Jetzt erreicht das Klickereignis den Browser nicht mehr und versucht nicht, den Link zu laden, auf den verwiesen wird href. (Beachten Sie jedoch, dass, wenn der Benutzer mit der rechten Maustaste auf den Link klickt und den Link direkt öffnet, überhaupt kein Klickereignis auftritt. Stattdessen wird die URL, auf die das hrefAttribut zeigt, direkt geladen .)

Zu den Kommentaren zur besuchten Linkfarbe in den Browsern. Auch dies hat nichts mit Winkel zu tun. Wenn Sie href="..."standardmäßig auf eine von Ihrem Browser besuchte URL verweisen, ist die Linkfarbe unterschiedlich. Dies wird durch CSS gesteuert : Selector besucht . Sie können Ihr CSS ändern, um dieses Verhalten zu überschreiben:

a {
   color:pink;
}

PS1 :

Einige Antworten empfehlen:

<a href .../>

hrefist eine Winkelrichtlinie. Wenn Ihre Vorlage im Winkel verarbeitet wird, wird diese in konvertiert

<a href="" .../>

Diese beiden Wege sind im Wesentlichen gleich.

Schreiben Sie einfach ng-click vor href .. Es hat bei mir funktioniert

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

Ich glaube nicht, dass Sie "#" aus href entfernen müssen. Folgende Arbeiten mit Angularjs 1.2.10

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

Sie können dies auch versuchen:

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

Ich werde für Sie ein Beispiel hinzufügen, das für mich funktioniert, und Sie können es ändern, wie Sie möchten.

Ich füge den folgenden Code in meinen Controller ein.

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

und für meine Ansichtsseite füge ich den folgenden Code hinzu.

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

Haben Sie versucht, innerhalb der Abmeldefunktion selbst umzuleiten? Angenommen, Ihre Abmeldefunktion lautet wie folgt

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

Dann können Sie einfach haben

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

Bitte prüfen Sie das

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

Das funktioniert bei mir

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