Ankraj etiketlerinde varsayılanlar nasıl önlenir?

Diyelim ki böyle bir çapa etiketim var

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

AngularJS'de tarayıcının # numarasına gitmesini nasıl önleyebilirim ?

GÜNCELLEME : O zamandan beri bu çözüm hakkındaki fikrimi değiştirdim. Bu konuda daha fazla gelişme ve zaman geçirdikten sonra, bu soruna daha iyi bir çözümün aşağıdakileri yapmak olduğuna inanıyorum:

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

Ve sonra cssekstra bir kurala sahip olmak için güncelleyin :

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

Çok daha basit ve aynı işlevselliği sağlar ve çok daha verimlidir. Umarım gelecekte bu çözümü arayan herkese yardımcı olabilir.

Aşağıda, sadece eski amaçlar için burada bıraktığım önceki çözümüm:

Bu sorunu çok yaşıyorsanız, bu sorunu giderecek basit bir yönerge şudur:

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();
                });
            }
        }
   };
});

Özniteliklerinin boş bir dize ( ) veya karma ( ) olup olmadığını veya bir atama <a></a>olup olmadığını görmek için tüm bağlantı etiketlerini ( ) kontrol eder . Bu koşullardan herhangi birini bulursa, olayı yakalar ve varsayılan davranışı önler.href""'#'ng-click

Tek aşağı tarafı, tüm bağlayıcı etiketler için bu yönergeyi çalıştırmasıdır. Dolayısıyla, sayfada çok fazla bağlayıcı etiketiniz varsa ve yalnızca az sayıda varsayılan davranışı önlemek istiyorsanız, bu yönerge çok verimli değildir. Ancak, neredeyse her zaman istiyorum preventDefault, bu yüzden bu direktifi AngularJS uygulamalarımda her yerde kullanıyorum.

NgHref belgelerine göre href'i bırakabilmeniz veya href = "" yapabilmeniz gerekir.

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

$ Event nesnesini yönteminize iletebilir ve $event.preventDefault()varsayılan işlemenin gerçekleşmemesi için çağırabilirsiniz :

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

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

Bu tür şeyler için direktifleri kullanmayı tercih ederim . İşte bir örnek

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

Ve yönerge kodu eat-click:

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

Artık eat-clicközelliği herhangi bir öğeye ekleyebilirsiniz;preventDefault() düzenlenecektir.

Yararları:

1. Çirkin $eventnesneyido() işlevinize .
2. Denetleyiciniz daha fazla birim test edilebilir, çünkü $eventnesneyi saplamak zorunda değil

Renaud harika bir çözüm verse de

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

Şahsen ben de bazı yan etkileri önlemek için $ event.stopPropagation () gerekir bulundu

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

benim çözümüm olacak

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

Bulduğum en kolay çözüm şudur:

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

Yani bu cevapları okurken, @Chris hala en "doğru" cevabı var, sanırım, ama bir sorunu var, "işaretçi" göstermez ....

İşte bir imleç eklemenize gerek kalmadan bu sorunu çözmenin iki yolu: işaretçi stili:

1. Şunun javascript:void(0)yerine kullanın #:

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

2. Kullanım $event.preventDefault()içinde ng-clickdirektifi (DOM ile ilgili referanslar ile denetleyici kadar çöpe kalmaz):

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

Şahsen ben ikincisini ikincisine tercih ederim. burada tartışılanjavascript:void(0) başka faydaları da vardır . Ayrıca bu bağlantıda korkutucu bir şekilde yeni olan ve doğrudan açısal bir uygulama için doğrudan geçerli olmayan "göze batmayan JavaScript" tartışması da vardır.

Aşağıdaki gibi yapabilirsiniz

1. hrefözniteliği nitelikten kaldırın (a ) etiketinden

2. tıklama öğelerini css olarak işaretçi imlecini ayarla

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

HTML

here pure angularjs: ng-click fonksiyonunun yakınında noktalı virgül ayırarak preventDefault () fonksiyonu yazabilirsiniz

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

JS

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

(veya)

bu yoldan devam edebilirsiniz, bu zaten burada tartışılıyor.

HTML

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

JS

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

Yukarıda listelenen görebildiğim bu seçeneği deneyin:

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

Bir web uygulaması yaptığınız için neden bağlantılara ihtiyacınız var?

Ankrajlarınızı düğmelere değiştirin!

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

hala alakalı ise:

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

...

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

...

Bir href üzerindeki olaylardan kaçınmanın en güvenli yolu onu

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

Ben giderdim:

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

• çünkü belgelere göre href'den çıkabilmelisiniz ve daha sonra Açısal sizin için varsayılanı ele alacaktır!

Bütün bu önleme varsayılan şey benim için kafa karıştırıcı oldu, bu yüzden orada ne zaman ve nerede Angular varsayılan engelliyor göstermek bir JSFiddle oluşturduk .

JSFiddle Angular'ın bir direktifini kullanıyor - bu yüzden TAM aynı olmalıdır. Kaynak kodu burada görebilirsiniz: bir etiket kaynak kodu

Umarım bu bazıları için açıklığa yardımcı olur.

Dokümanı ngHref'e göndermek isterdim ama itibarım yüzünden yapamam.

Hep böyle yapıyorum. Tıkır tıkır çalışıyor!

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

Ya da satır içi ihtiyacınız varsa bunu yapabilirsiniz:

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

Birçok cevap aşırıya kaçmış gibi görünüyor. BENİM İÇİN bu işe yarıyor

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

Ben boş href özniteliği (veya "#") kullanamam (bu yüzden boş bir href özniteliği (veya "#") kullanamazsınız, ancak bir olay (çünkü bir olay ( e) değişken. Kendi direktifimi yarattım:

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

HTML'de:

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

Tenisçinin cevabından borçlanma. Tüm bağlantıları eklemek için özel bir yönerge oluşturmanıza gerek yok. Ancak, onun IE8 çalışmak için alamadım. Sonunda benim için işe yarayan şey (açısal 1.0.6 kullanarak).

'Bind' komutunun açısal tarafından sağlanan jqLite kullanmanıza izin verdiğine dikkat edin, böylece tam jQuery ile sarmaya gerek yoktur. Ayrıca stopPropogation yöntemi gerekli.

.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();
                    }
                })
            }
        };
    }
])

Açılı bir bootstrap açılır için çapa kullanırken bu aynı sorunla karşılaştım. İstenmeyen yan etkilerden kaçındığını bulduğum tek çözüm (yani, defada bırakma () nedeniyle kapanma kapanmıyor) aşağıdakileri kullanmaktı:

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

href'e hiç gitmek istemiyorsanız ... işaretlemenizi değiştirmeli ve bağlantı etiketi değil bir düğme kullanmalısınız çünkü anlamsal olarak bir bağlantı veya bağlantı değildir. Tersine, bazı kontroller yapan ve daha sonra yönlendiren bir düğme varsa, bir bağlantı / bağlantı etiketi değil, bir düğme olmalıdır ... SEO amacıyla da test [test paketi buraya ekleyin].

yalnızca değişiklikleri kaydetmeyi istemek veya kirli durumu kabul etmek gibi koşullu olarak yeniden yönlendirmek istediğiniz bağlantılar için ... ng-click = "someFunction ($ event)" kullanmanız ve validationError preventDefault ve / stopPropagation öğelerinde someFunction kullanmanız gerekir.

ayrıca sadece yapabileceğiniz için yapmanız gerektiği anlamına gelmez . javascript: void (0) gün içinde iyi çalıştı ... ama hain hackerlar / krakerler nedeniyle tarayıcılar bir href içinde javascript kullanan uygulamaları / siteleri bayrak ... yukarıdaki ducktype için bir neden görmüyorum ..

2010'dan beri, düğmeler gibi davranan bağlantıları kullanmak için hiçbir yerde 2016 olmamalı ... IE8'i desteklemeniz gerekiyorsa ve aşağıda iş yerinizi yeniden değerlendirmeniz gerekiyor.

/* NG CLICK PREVENT DEFAULT */

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

Yapmanız gereken, hrefniteliği tamamen atlamaktır.

Eğer bakarsak kaynak kodu için a(Açısal çekirdeğin bir parçası olan) eleman direktifi, bu satır 29 ülkesi - 31:

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

Yani Angular zaten bağlantı sorununu bir href olmadan çözüyor. Hala sahip olduğunuz tek sorun css problemidir. İşaretçi stilini yine de ng tıklaması olan bağlantılara uygulayabilirsiniz, örneğin:

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

Böylece, gerçek bağlantıları ince, farklı bir stil ve ardından işlevleri gerçekleştiren bağlantılar ile işaretleyerek sitenizi daha erişilebilir hale getirebilirsiniz.

Mutlu kodlama!

Hedefe ulaşmak için $ location'ın Html5Mode içindeki URL yönlendirmesini devre dışı bırakabilirsiniz. Bunu sayfa için kullanılan belirli bir denetleyicinin içinde tanımlayabilirsiniz. Bunun gibi bir şey:

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

Açısal 8 veya daha fazlasını kullanıyorsanız bir yönerge oluşturabilirsiniz:

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();
  }

}

Bileşen üzerindeki bağlantı etiketinizde şu şekilde bağlayabilirsiniz:

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

Uygulama Modülünün beyanı olmalıdır:

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


@NgModule({
  declarations: [
    AppComponent,
    PreventDefaultDirective

Bir alternatif şunlar olabilir:

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