Bagaimana cara mencegah Kerusakan pada tag jangkar?

Katakanlah saya memiliki anchor tag seperti

<a href="#" ng-click="do()">Click</a>

Bagaimana saya bisa mencegah browser dari menavigasi ke # di AngularJS ?

PEMBARUAN : Sejak itu saya berubah pikiran tentang solusi ini. Setelah lebih banyak pengembangan dan waktu yang dihabiskan untuk mengerjakan ini, saya percaya solusi yang lebih baik untuk masalah ini adalah dengan melakukan hal berikut:

<a ng-click="myFunction()">Click Here</a>

Dan kemudian perbarui Anda cssuntuk memiliki aturan tambahan:

a[ng-click]{
    cursor: pointer;
}

Jauh lebih sederhana dan menyediakan fungsionalitas yang sama persis dan jauh lebih efisien. Harapan yang mungkin bisa membantu orang lain mencari solusi ini di masa depan.

Berikut ini adalah solusi saya sebelumnya, yang saya tinggalkan di sini hanya untuk tujuan warisan:

Jika Anda sering mengalami masalah ini, arahan sederhana yang akan memperbaiki masalah ini adalah sebagai berikut:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

Itu memeriksa semua tag anchor ( <a></a>) untuk melihat apakah hrefatribut mereka adalah string kosong ( "") atau hash ( '#') atau ada ng-clicktugas. Jika menemukan salah satu dari kondisi ini, ia menangkap peristiwa dan mencegah perilaku default.

Satu-satunya sisi adalah menjalankan arahan ini untuk semua tag anchor. Jadi jika Anda memiliki banyak tag anchor pada halaman dan Anda hanya ingin mencegah perilaku default untuk sejumlah kecil, maka arahan ini tidak terlalu efisien. Namun, saya hampir selalu ingin preventDefault, jadi saya menggunakan arahan ini di seluruh aplikasi AngularJS saya.

Menurut dokumen untuk ngHref Anda harus dapat meninggalkan href atau melakukan href = "".

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

Anda dapat mengirimkan objek $ event ke metode Anda, dan memanggilnya $event.preventDefault(), sehingga pemrosesan default tidak akan terjadi:

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

// then in your controller.do($event) method
$event.preventDefault()

Saya lebih suka menggunakan arahan untuk hal semacam ini. Ini sebuah contoh

<a href="#" ng-click="do()" eat-click>Click Me</a>

Dan kode arahan untuk eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

Sekarang Anda dapat menambahkan eat-clickatribut ke elemen apa pun dan itu akan menjadi preventDefault()otomatis.

Manfaat:

1. Anda tidak harus memasukkan $eventobjek jelek ke dalam do()fungsi Anda .
2. Pengontrol Anda lebih mudah diuji unit karena tidak perlu mematikan $eventobjek

Meski Renaud memberi solusi hebat

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

Saya pribadi menemukan Anda juga memerlukan $ event.stopPropagation () dalam beberapa kasus untuk menghindari beberapa efek samping

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

akan menjadi solusi saya

ng-click="$event.preventDefault()"

Solusi termudah yang saya temukan adalah yang ini:

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

Jadi membaca jawaban ini, @ Chris masih memiliki jawaban yang paling "benar", saya kira, tetapi memiliki satu masalah, itu tidak menunjukkan "pointer" ....

Jadi, inilah dua cara untuk mengatasi masalah ini tanpa perlu menambahkan kursor: gaya pointer:

1. Gunakan javascript:void(0)alih-alih #:

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>

2. Gunakan $event.preventDefault()dalam ng-clickarahan (sehingga Anda tidak membuang controller Anda dengan referensi terkait DOM):

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>

Secara pribadi saya lebih suka yang pertama daripada yang terakhir. javascript:void(0)memiliki manfaat lain yang dibahas di sini . Ada juga diskusi tentang "JavaScript tidak mencolok" di tautan yang baru-baru ini menakutkan, dan tidak serta-merta langsung berlaku untuk aplikasi bersudut.

Anda bisa melakukannya sebagai berikut

1.Hapus hrefatribut dari atag anchor ( )

2. Atur kursor kursor dalam elemen klik css ke ng

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

HTML

di sini pure angularjs: dekat dengan fungsi ng-klik Anda dapat menulis fungsi preventDefault () dengan memisahkan tanda titik koma

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

JS

$scope.do = function() {
    alert("do here anything..");
}

(atau)

Anda dapat melanjutkan dengan cara ini, ini sudah dibahas di sini.

HTML

<a href="#" ng-click="do()">Click me</a>

JS

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

Coba opsi ini yang bisa saya lihat belum terdaftar di atas:

<a href="" ng-click="do()">Click</a>

Karena Anda membuat aplikasi web, mengapa Anda perlu tautan?

Tukar jangkar Anda ke tombol!

<button ng-click="do()"></button>

jika masih relevan:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

Cara teraman untuk menghindari peristiwa pada href adalah mendefinisikannya sebagai

<a href="javascript:void(0)" ....>

Saya akan pergi dengan:

<a ng-click="do()">Click</a>

• karena menurut dokumen Anda harus dapat meninggalkan href dan kemudian Angular akan menangani pencegahan default untuk Anda!

Seluruh ini mencegah hal standar telah membingungkan saya, jadi saya telah membuat JSFiddle menggambarkan kapan dan di mana Angular mencegah default .

JSFiddle menggunakan arahan Angular - jadi harus sama persis. Anda dapat melihat kode sumber di sini: kode sumber tag

Saya harap ini akan membantu klarifikasi untuk beberapa orang.

Saya ingin memposting dokumen ke ngHref tetapi saya tidak bisa karena reputasi saya.

Inilah yang selalu saya lakukan. Bekerja seperti pesona!

<a href ng-click="do()">Click</a>

Atau jika Anda perlu inline maka Anda dapat melakukan ini:

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

Banyak jawaban tampaknya berlebihan. BAGI SAYA, ini berhasil

 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>

Saya memerlukan kehadiran nilai atribut href untuk degradasi (ketika js dimatikan), jadi saya tidak dapat menggunakan atribut href kosong (atau "#"), tetapi kode di atas tidak bekerja untuk saya, karena saya memerlukan sebuah acara ( e) variabel. Saya membuat arahan saya sendiri:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

Dalam HTML:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

Meminjam dari jawaban tennisgent. Saya suka Anda tidak harus membuat arahan khusus untuk menambahkan semua tautan. Namun, saya tidak bisa membuatnya bekerja di IE8. Inilah yang akhirnya bekerja untuk saya (menggunakan sudut 1.0.6).

Perhatikan bahwa 'bind' memungkinkan Anda untuk menggunakan jqLite yang disediakan oleh angular sehingga tidak perlu membungkus dengan jQuery penuh. Juga diperlukan metode stopPropogation.

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

Saya mengalami masalah yang sama ketika menggunakan jangkar untuk drop down bootstrap sudut. Satu-satunya solusi yang saya temukan yang menghindari efek samping yang tidak diinginkan (mis. Drop down tidak menutup karena menggunakan preventDefault ()) adalah menggunakan yang berikut ini:

 <a href="javascript:;" ng-click="do()">Click</a>

jika Anda tidak pernah ingin pergi ke href ... Anda harus mengubah markup Anda dan menggunakan tombol bukan jangkar karena secara semantik itu bukan jangkar atau tautan. Sebaliknya jika Anda memiliki tombol yang melakukan beberapa pemeriksaan dan kemudian mengarahkan kembali itu harus menjadi tautan / tag jangkar dan bukan tombol ... untuk keperluan SEO juga pengujian [masukkan test suite di sini].

untuk tautan yang Anda hanya ingin mengarahkan kembali secara kondisional seperti meminta untuk menyimpan perubahan, atau mengakui kondisi kotor ... Anda harus menggunakan ng-klik = "someFunction ($ event)" dan di someFunction pada validasi AndaError preventDefault dan atau stopPropagation.

juga hanya karena Anda tidak dapat berarti Anda harus melakukannya . javascript: void (0) bekerja dengan baik pada hari itu ... tetapi karena peretas jahat / peramban menandai aplikasi / situs yang menggunakan javascript dalam sebuah href ... lihat tidak ada alasan untuk ducktype di atas ..

ini tahun 2016 sejak 2010 seharusnya tidak ada alasan di mana pun untuk menggunakan tautan yang bertindak seperti tombol ... jika Anda masih harus mendukung IE8 dan di bawah ini Anda perlu mengevaluasi kembali tempat bisnis Anda.

/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

Yang harus Anda lakukan, adalah menghilangkan hrefatribut sepenuhnya.

Jika Anda melihat kode sumber untuk aarahan elemen (yang merupakan bagian dari inti Angular), kode itu menyatakan di baris 29 - 31:

if (!element.attr(href)) {
    event.preventDefault();
}

Yang berarti Angular sudah menyelesaikan masalah tautan tanpa href. Satu-satunya masalah yang masih Anda miliki adalah masalah css. Anda masih dapat menerapkan gaya pointer ke jangkar yang memiliki klik-ng, misalnya:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

Jadi, Anda bahkan dapat membuat situs Anda lebih mudah diakses dengan menandai tautan nyata dengan gaya yang berbeda, lalu tautan yang menjalankan fungsi.

Selamat coding!

Anda dapat menonaktifkan pengalihan url di dalam Html5Mode $ location untuk mencapai tujuan. Anda dapat mendefinisikannya di dalam kontroler spesifik yang digunakan untuk halaman tersebut. Sesuatu seperti ini:

app.config(['$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false,
        requireBase: false
    });
}]);

Jika Anda menggunakan Angular 8 atau lebih, Anda dapat membuat arahan:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[preventDefault]'
})
export class PreventDefaultDirective {

  @HostListener("click", ["$event"])
  public onClick(event: any): void
  {
    console.log('click');
    debugger;
      event.preventDefault();
  }

}

Pada tag jangkar Anda pada komponen Anda dapat mengirimkannya seperti ini:

  <a ngbDropdownToggle preventDefault class="nav-link dropdown-toggle" href="#" aria-expanded="false" aria-haspopup="true" id="nav-dropdown-2">Pages</a>

Modul Aplikasi harus memiliki deklarasi:

import { PreventDefaultDirective } from './shared/directives/preventdefault.directive';


@NgModule({
  declarations: [
    AppComponent,
    PreventDefaultDirective

Alternatifnya mungkin:

<span ng-click="do()">Click</span>