href menimpa ng-klik di Angular.js


118

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.


Bisakah Anda menguraikan lebih lanjut tentang "href diperlukan untuk Twitter Bootstrap"? Bagian yang mana? CSS atau JavaScript?
pkozlowski.opource

"Widget" navigasi Bootstrap Twitter diatur untuk menggunakan tautan, jika Anda menambahkan tombol ke dalamnya, bahkan tombol yang ditata agar terlihat seperti tautan itu merusak gaya navigasi. Ini mungkin bukan HTML semantik tetapi solusi @ sketchfemme melakukan apa yang saya (dan mungkin Paul) ingin lakukan.
BenCr

Abaikan semua yang saya katakan, navbar berfungsi sempurna dengan tombol jika Anda menggunakan HTML dan kelas yang tepat. getbootstrap.com/components/#navbar
BenCr

Anda harus menerima jawaban dari Mithu, yaitu menggunakan URL kosong
Peter Morris

1
@Paul Poster asli menanyakan bagaimana caranya agar <a href> tidak menavigasi. Jawaban yang diterima mengatakan untuk beralih ke tombol. Meskipun berhasil itu bukanlah solusi untuk masalah tersebut, terutama jika seperti saya sendiri Anda terpaksa menggunakan <a href> karena itu menu bootstrap atau semacamnya. Solusi yang tepat untuk pertanyaan khusus ini adalah dengan menggunakan url kosong <a href="" ng-click="whatever()"> Keluar </a> - Saya telah mengujinya dan dapat memastikannya berfungsi. Syukurlah ada orang lain yang memberikan jawaban yang benar atau saya masih buntu.
Peter Morris

Jawaban:


35

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


Ya, jika Anda dapat menjelaskan lebih lanjut tentang bagaimana Twitter Bootstrap membutuhkannya, mungkin saya dapat membantu lebih banyak.
Geoff

Bagaimana cara kerjanya dengan mesin pencari? Saya menggunakan perutean AngularJS dan perlu mempertahankan status dalam layanan jadi untuk semua tautan aplikasi internal saya, saya menggunakan $ lokasi, tetapi menghapus href membuat mesin telusur tidak mungkin mengikuti situs tersebut.
Darrrrrren

2
tombol tidak bisa memiliki elemen lain di dalamnya, jadi untuk gaya, Anda tidak ingin melakukannya - jika Anda membutuhkan sesuatu di dalamnya.
sheriffderek

246

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


3
Ketika saya mencoba ini, semua tautan tampaknya dikunjungi, yang bukan perilaku yang saya cari. Cara lain ( href="#") menyebabkan halaman dimuat ulang, yang juga salah.
Rhys van der Waerden

4
Hal ini membuat IE9 tidak menampilkan kursor tangan. Menggunakan href=""solusinya.
Juampy NR

1
@juampy, penyerahan tautan dapat ditangani dengan CSS. Jawaban yang diberikan ini adalah cara resmi AngularJS untuk melakukannya.
berangkat

# Akan diperlakukan seperti tautan hash.
sheriffderek

3
<a href="javscript:void(0)" ng-click="logout()">Sign out</a>akan melayani Anda dengan baik juga
Marios Fakiolas

88

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.


11
Ini adalah solusi yang bagus. Jika Anda memiliki href, Anda dapat mengklik kanan untuk membukanya di tab baru, tetapi klik kiri disebut ng-click. Persis apa yang saya cari
Tom Grant

Sekali lagi jawaban yang sangat bagus. Baik klik kiri dan kanan bekerja
Jay Jay Jay

Bekerja sangat baik untuk mengizinkan kontrol carousel Bootstrap tanpa memicu perutean. Terima kasih!
Jason Maggard

Sempurna! Saya dapat melanjutkan dengan tautan dan mendapatkan lebih banyak indeks di Google dan menggunakan ng-click untuk menelepon di Ajax. Terima kasih.
Guilherme IA

Solusi hebat, cepat dan bermanfaat. Terima kasih!
Josue Rocha

72

Ini solusi lainnya:

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

yaitu Hapus saja # dari atribut href


1
Untuk pertanyaan yang diajukan, ini harus menjadi solusinya. Bekerja pada Angular 1.1.5 juga
Sindre

18
Sepertinya <a href="" ng-click=""> akan mencegah ng-klik di browser Android 2.3.x. Saya akhirnya menggunakan <a href="javascript:void(0)" ng-click="">
duckegg

1
Saran Duckegg adalah yang terbaik
Jiří Vypědřík

26

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


Solusi ini bekerja dan hanya mengubah perilaku klik kiri, klik kanan tetap utuh (menu konteks), termasuk kemungkinan untuk link di href. Jadi itu adalah solusi yang lebih umum dibandingkan dengan TooMuchTenacious, yang sebenarnya menjawab pertanyaan secara lebih langsung.
Exocom

21

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 .


13

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!


Berfungsi, tautan tidak mengubah url Anda dan tidak ditandai sebagai dikunjungi. Jawaban Terbaik!
Jim109

10

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.


5

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

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


2

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

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

1

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>

0

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>

0

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>

0

Tolong periksa ini

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

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.