href zastępuje ng-click w Angular.js

Gdy zdefiniowane są oba atrybuty href i ng-click:

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

hrefatrybut ma pierwszeństwo przed NG-click.

Szukam sposobu na podniesienie priorytetu ng-click.

href jest wymagany dla Twitter Bootstrap, nie mogę go usunąć.

Prawdopodobnie powinieneś po prostu użyć tagu przycisku, jeśli nie potrzebujesz URI.

Ten przykład z kątowej witryny dokumentacji po prostu działa hrefbez przypisywania go do pustego ciągu:

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

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

Możesz po prostu zapobiec domyślnemu zachowaniu zdarzenia kliknięcia bezpośrednio w szablonie.

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

Zgodnie z dokumentacją kątową ,

Dyrektywy takie jak ngClick i ngFocus ujawniają obiekt $ event w zakresie tego wyrażenia.

Oto inne rozwiązanie:

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

tzn. Po prostu usuń # z atrybutu href

Jeszcze tylko jedna wskazówka. Jeśli potrzebujesz prawdziwego adresu URL (do obsługi dostępności przeglądarki), możesz wykonać następujące czynności:

szablon:

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

dyrektywa:

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

W ten sposób twój kod w linkClicked () będzie miał szansę na wykonanie przed przejściem do linku

W Angular <a>s są dyrektywami . W związku z tym, jeśli masz pusty hreflub nie href, Angular zadzwoni event.preventDefault.

Ze źródła :

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

Oto plnkr demonstrujący brakujący hrefscenariusz.

To działało dla mnie w IE 9 i AngularJS v1.0.7:

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

Dzięki komentarzowi duckeggs za działające rozwiązanie!

Jest tak wiele odpowiedzi na to pytanie, ale wydaje się, że jest trochę nieporozumień co do tego, co się tutaj właściwie dzieje.

Po pierwsze, twoje założenie

„href zastępuje ng-click w Angular.js”

jest źle. W rzeczywistości po kliknięciu zdarzenie kliknięcia jest najpierw obsługiwane przez angular (zdefiniowane przez ng-clickdyrektywę w angular 1.x i clickangular 2.x +), a następnie kontynuuje propagację (co ostatecznie powoduje przejście przeglądarki do url zdefiniowany z hrefatrybutem). (Zobacz to, aby uzyskać więcej informacji na temat propagacji zdarzeń w javascript)

Jeśli chcesz tego uniknąć, powinieneś anulować propagację zdarzenia za pomocą metody interfejsu The EventpreventDefault() :

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

(To jest czysta funkcjonalność javascript i nie ma nic wspólnego z angularem)

Teraz to już rozwiąże twój problem, ale nie jest to optymalne rozwiązanie. Angular słusznie promuje wzorzec MVC . Dzięki temu rozwiązaniu Twój szablon HTML jest mieszany z logiką javascript. Powinieneś starać się tego unikać tak bardzo, jak to możliwe i umieścić swoją logikę w kontrolerze kątowym. Więc lepszy sposób byłby

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

A w metodzie logout ():

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

Teraz zdarzenie click nie dotrze do przeglądarki, więc nie spróbuje załadować wskazanego linku href. (Należy jednak pamiętać, że jeśli użytkownik kliknie link prawym przyciskiem myszy i bezpośrednio go otworzy, nie będzie w ogóle zdarzenia kliknięcia. Zamiast tego zostanie bezpośrednio załadowany adres URL wskazany przez hrefatrybut).

Odnośnie komentarzy na temat koloru odwiedzanych linków w przeglądarkach. Ponownie nie ma to nic wspólnego z angularem, jeśli href="..."domyślnie kierujesz na odwiedzany adres URL przez przeglądarkę, kolor linku będzie inny. Jest to kontrolowane przez CSS: odwiedził Selector , możesz zmodyfikować swój css, aby nadpisać to zachowanie:

a {
   color:pink;
}

PS1 :

Niektóre odpowiedzi sugerują użycie:

<a href .../>

hrefjest dyrektywą kątową. Gdy szablon jest przetwarzany przez kątowe, zostanie on przekonwertowany na

<a href="" .../>

Te dwa sposoby są zasadniczo takie same.

Po prostu napisz ng-click przed href .. Zadziałało dla mnie

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

Myślę, że nie musisz usuwać znaku „#” z href. Następujące prace z Angularjs 1.2.10

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

Możesz także spróbować tego:

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

Dodam dla Ciebie przykład, który działa dla mnie i możesz go zmienić, jak chcesz.

Dodaję poniższy kod w moim kontrolerze.

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

a na mojej stronie widoku dodaję poniższy kod.

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

Czy próbowałeś przekierować wewnątrz samej funkcji wylogowania? Załóżmy na przykład, że funkcja wylogowania jest następująca

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

Wtedy możesz po prostu mieć

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

Proszę to sprawdzić

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

To działa dla mnie

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