href menimpa ng-klik di Angular.js

Saat atribut href dan ng-click ditentukan:

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

yang hrefatribut diutamakan atas ng-klik.

Saya mencari cara untuk meningkatkan prioritas ng-click.

href diperlukan untuk Twitter Bootstrap, saya tidak dapat menghapusnya.

Anda mungkin sebaiknya menggunakan tag tombol jika Anda tidak membutuhkan uri.

Contoh dari situs dokumentasi bersudut ini hrefbahkan tanpa menugaskannya ke string kosong:

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

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

Anda dapat dengan mudah mencegah perilaku default dari peristiwa klik secara langsung di template Anda.

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

Sesuai dokumentasi sudut ,

Direktif seperti ngClick dan ngFocus mengekspos objek $ event dalam lingkup ekspresi itu.

Ini solusi lainnya:

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

yaitu Hapus saja # dari atribut href

Satu petunjuk lagi. Jika Anda membutuhkan URL asli (untuk mendukung aksesibilitas browser), Anda dapat melakukan hal berikut:

template:

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

pengarahan:

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

Dengan cara ini kode Anda di linkClicked () akan memiliki kesempatan untuk dieksekusi sebelum menavigasi ke tautan

Di Angular, <a>s adalah arahan . Dengan demikian, jika Anda memiliki kosong hrefatau tidak href, Angular akan memanggil event.preventDefault.

Dari sumber :

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

Berikut adalah plnkr yang mendemonstrasikan hrefskenario yang hilang .

Ini berfungsi untuk saya di IE 9 dan AngularJS v1.0.7:

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

Terima kasih untuk komentar duckeggs atas solusi yang berhasil!

Ada begitu banyak jawaban untuk pertanyaan ini di sini, tetapi tampaknya ada sedikit kebingungan tentang apa yang sebenarnya terjadi di sini.

Pertama, premis Anda

"href menimpa ng-klik di Angular.js"

salah. Apa yang sebenarnya terjadi adalah setelah klik Anda, peristiwa klik pertama-tama ditangani oleh sudut (ditentukan oleh ng-clickdirektif di sudut 1.x dan clickdi sudut 2.x +) dan kemudian terus menyebar (yang akhirnya memicu browser untuk menavigasi ke url didefinisikan dengan hrefatribut). (Lihat ini untuk lebih lanjut tentang propagasi peristiwa di javascript)

Jika Anda ingin menghindari ini, maka Anda harus membatalkan penyebaran acara menggunakan metode antarmuka AcarapreventDefault() :

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

(Ini adalah fungsi javascript murni dan tidak ada hubungannya dengan sudut)

Sekarang, ini sudah akan menyelesaikan masalah Anda tetapi ini bukan solusi optimal. Angular, berhak, mempromosikan pola MVC . Dengan solusi ini, template html Anda dicampur dengan logika javascript. Anda harus mencoba menghindari ini sebanyak mungkin dan memasukkan logika Anda ke dalam pengontrol sudut Anda. Jadi cara yang lebih baik adalah

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

Dan dalam metode logout () Anda:

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

Sekarang peristiwa klik tidak akan mencapai browser, jadi tidak akan mencoba memuat tautan yang ditunjuk oleh href. (Namun perhatikan bahwa jika pengguna mengklik kanan pada link tersebut dan langsung membuka link tersebut, maka tidak akan ada peristiwa klik sama sekali. Sebaliknya akan langsung memuat url yang ditunjukkan oleh hrefatribut.)

Mengenai komentar tentang warna link yang dikunjungi di browser. Sekali lagi ini tidak ada hubungannya dengan sudut, jika Anda href="..."menunjuk ke url yang dikunjungi oleh browser Anda secara default, warna tautan akan berbeda. Ini dikontrol oleh CSS: Visit Selector , Anda dapat mengubah css Anda untuk menimpa perilaku ini:

a {
   color:pink;
}

PS1 :

Beberapa jawaban menyarankan untuk digunakan:

<a href .../>

hrefadalah arahan sudut. Saat template Anda diproses oleh sudut, ini akan diubah menjadi

<a href="" .../>

Kedua cara itu pada dasarnya sama.

Cukup tulis ng-click sebelum href .. Berhasil untuk saya

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

Saya rasa Anda tidak perlu menghapus "#" dari href. Berikut bekerja dengan Angularjs 1.2.10

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

Anda juga dapat mencoba ini:

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

Saya akan menambahkan contoh yang berhasil untuk saya dan Anda dapat mengubahnya sesuai keinginan.

Saya menambahkan kode di bawah ini di dalam pengontrol saya.

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

dan untuk halaman tampilan saya, saya menambahkan kode di bawah ini.

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

Apakah Anda mencoba mengalihkan di dalam fungsi logout itu sendiri? Misalnya, fungsi logout Anda adalah sebagai berikut

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

Maka Anda bisa memilikinya

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

Tolong periksa ini

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

Ini berhasil untuk saya

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