href, Angular.js'de ng-tıklamayı geçersiz kılar

Hem href hem de ng-tıklama özellikleri tanımlandığında:

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

hrefnitelik ng tıklama önceliklidir.

Ng tıklama önceliğini artırmanın bir yolunu arıyorum.

href Twitter Bootstrap için gerekli, kaldıramıyorum.

Bir uri'ye ihtiyacınız yoksa muhtemelen bir düğme etiketi kullanmalısınız.

Açısal dokümantasyon sitesinden alınan bu örnek, hrefonu boş bir dizeye bile atamadan yapar :

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

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

Tıklama olayının varsayılan davranışını doğrudan şablonunuzdan engelleyebilirsiniz.

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

Başına açısal belgeler ,

NgClick ve ngFocus gibi yönergeler, bu ifade kapsamında bir $ olay nesnesini ortaya çıkarır.

İşte başka bir çözüm:

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

ör. href özelliğinden # işaretini kaldırın

Sadece bir ipucu daha. Gerçek URL'ye ihtiyacınız varsa (tarayıcı erişilebilirliğini desteklemek için) aşağıdakileri yapabilirsiniz:

şablonu:

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

direktif:

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

Bu şekilde, linkClicked () içindeki kodunuzun bağlantıya gitmeden önce çalıştırma şansı olacaktır.

Angular'da <a>s yönergelerdir . Bu nedenle, boş bir yeriniz varsa hrefveya yoksa href, Angular arayacaktır event.preventDefault.

Gönderen kaynağı :

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

İşte eksik senaryoyu gösteren bir plnkrhref .

Bu benim için IE 9 ve AngularJS v1.0.7'de çalıştı:

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

Duckeggs'in çalışma çözümü için yorumuna teşekkürler !

Burada bu sorunun pek çok cevabı var ama görünüşe göre burada gerçekte neler olup bittiğine dair biraz kafa karışıklığı var.

İlk olarak, öncülünüz

"href, Angular.js'de ng-tıklamayı geçersiz kılar"

Hata. Gerçekte olan şey, tıklamanızdan sonra, tıklama olayının ilk olarak açısal ( ng-clickaçısal 1.x ve clickaçısal 2.x + yönerge ile tanımlanmıştır) tarafından ele alınması ve daha sonra yayılmaya devam etmesidir (bu da sonunda tarayıcıyı, ile tanımlanmış url hrefözniteliği). (bakınız bu ) javaScript olay yetiştiriciliği daha fazla

Bundan kaçınmak istiyorsanız, Olay arayüzünün preventDefault()yöntemini kullanarak olay yayılımını iptal etmelisiniz :

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

(Bu saf javascript işlevselliğidir ve açısal ile ilgisi yoktur)

Şimdi, bu zaten sorununuzu çözecektir, ancak bu optimal çözüm değildir. Açısal, haklı olarak, MVC modelini destekler . Bu çözüm ile html şablonunuz javascript mantığıyla karıştırılır. Bundan mümkün olduğunca kaçınmaya çalışmalı ve mantığınızı açısal denetleyicinize yerleştirmelisiniz. Yani daha iyi bir yol

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

Ve logout () yönteminizde:

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

Artık tıklama olayı tarayıcıya ulaşmayacağı için işaret ettiği bağlantıyı yüklemeye çalışmayacaktır href. (Bununla birlikte, kullanıcı bağlantıyı sağ tıklar ve doğrudan bağlantıyı açarsa, o zaman bir tıklama etkinliği olmayacağını unutmayın. Bunun yerine, tarafından gösterilen URL'yi doğrudan yükleyecektir.href özniteliğin .)

Tarayıcılarda ziyaret edilen bağlantı rengi hakkındaki yorumlarla ilgili olarak. Yine bunun açısal ile ilgisi yoktur href="...", tarayıcınız tarafından ziyaret edilen bir url'ye işaret ederseniz, varsayılan olarak bağlantı rengi farklı olacaktır. Bu, CSS: ziyaret Seçici tarafından kontrol edilir , bu davranışı geçersiz kılmak için css'nizi değiştirebilirsiniz:

a {
   color:pink;
}

PS1 :

Bazı cevaplar şunları kullanmanızı önerir:

<a href .../>

hrefaçısal bir yönergedir. Şablonunuz açısal olarak işlendiğinde bu,

<a href="" .../>

Bu iki yol esasen aynıdır.

Href'den önce ng-tıklama yazmanız yeterli .. Benim için çalıştı

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

Href'den "#" öğesini kaldırmanız gerektiğini sanmıyorum. Angularjs 1.2.10 ile yapılan çalışmaların ardından

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

Ayrıca şunu da deneyebilirsiniz:

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

Sizin için benim için çalışan bir örnek ekleyeceğim ve bunu istediğiniz gibi değiştirebilirsiniz.

Aşağıdaki kodu denetleyicimin içine ekliyorum.

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

ve görünüm sayfam için aşağıdaki kodu ekliyorum.

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

Oturum kapatma işlevinin içinde yeniden yönlendirmeyi denediniz mi? Örneğin, çıkış işlevinizin aşağıdaki gibi olduğunu söyleyin

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

O zaman sadece alabilirsin

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

Lütfen bunu kontrol edin

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

Bu benim için çalışıyor

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