348

次のようなアンカータグがあるとしましょう

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

ブラウザーがAngularJSの # に移動しないようにするにはどうすればよいですか?

4

28 に答える 28

261

更新:以来、私はこの解決策について考えを変えました。これにさらに開発と時間を費やした後、この問題に対するより良い解決策は、次のことを行うことだと思います。

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

そしてcss、追加のルールを持つように更新します。

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

はるかにシンプルで、まったく同じ機能を提供し、はるかに効率的です。将来、このソリューションを探している他の人に役立つことを願っています。

以下は私の以前のソリューションであり、レガシーな目的のためにここに残しておきます。

この問題が頻繁に発生する場合、この問題を解決する簡単なディレクティブは次のとおりです。

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

すべてのアンカー タグ ( <a></a>) をチェックして、それらのhref属性が空の文字列 ( "") またはハッシュ ( '#') であるかどうか、またはng-click割り当てがあるかどうかを確認します。これらの条件のいずれかが見つかった場合、イベントをキャッチしてデフォルトの動作を防ぎます。

唯一の欠点は、すべてのアンカー タグに対してこのディレクティブを実行することです。そのため、ページに多数のアンカー タグがあり、少数のアンカー タグに対してのみデフォルトの動作を防止したい場合、このディレクティブはあまり効率的ではありません。ただし、ほとんどの場合preventDefault、このディレクティブを AngularJS アプリで使用します。

于 2013-08-01T16:21:36.893 に答える
243

デフォルトの処理が行われないように、$event オブジェクトをメソッドに渡して呼び出す$event.preventDefault()ことができます。

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

// then in your controller.do($event) method
$event.preventDefault()
于 2012-06-07T12:20:39.830 に答える
111

私は、この種のディレクティブを使用することを好みます。これが例です

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

そして、次のディレクティブ コードeat-click:

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

eat-clickこれで、属性を任意の要素に追加できるようになり、preventDefault()自動的に 'ed' が取得されます。

利点：

  1. $event醜いオブジェクトをdo()関数に渡す必要はありません。
  2. $eventオブジェクトをスタブ化する必要がないため、コントローラーの単体テストが容易になります。
于 2013-01-04T22:13:35.293 に答える
56

ルノーは素晴らしい解決策を提供しましたが、

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

私は個人的に、いくつかの副作用を避けるために、場合によっては $event.stopPropagation() も必要であることを発見しました

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

私の解決策になります

于 2014-05-26T19:18:30.310 に答える
35

私が見つけた最も簡単な解決策はこれです：

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>
于 2013-02-27T02:33:36.617 に答える
7

Web アプリを作成しているのに、なぜリンクが必要なのですか?

アンカーをボタンに交換してください!

<button ng-click="do()"></button>
于 2013-09-18T11:20:55.853 に答える
7

私が見ることができるこのオプションを試してみてください。これはまだ上にリストされていません:

<a href="" ng-click="do()">Click</a>
于 2015-11-03T14:09:10.057 に答える
6

href でのイベントを回避する最も安全な方法は、次のように定義することです。

<a href="javascript:void(0)" ....>
于 2013-03-28T16:05:45.330 に答える
5

私は一緒に行きます：

<a ng-click="do()">Click</a>
  • ドキュメントによると、hrefを離れることができるはずであり、Angularはデフォルトの防止を処理します!

これ全体が default を防ぐことが私を混乱させていたので 、Angular がいつどこで default を妨げているかを示すJSFiddleを作成しました。

JSFiddle は Angular の a ディレクティブを使用しているため、まったく同じである必要があります。ここでソースコードを見ることができます:タグのソースコード

これが一部の説明に役立つことを願っています。

ドキュメントを ngHref に投稿したかったのですが、私の評判のためにできません。

于 2014-01-15T07:57:03.487 に答える
4

または、インラインが必要な場合は、これを行うことができます：

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>
于 2014-06-25T16:17:04.787 に答える
4

多くの答えはやり過ぎのようです。私にとって、これはうまくいきます

 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>
于 2017-07-10T20:55:10.253 に答える
2

劣化のために href 属性の値が存在する必要があるため (js がオフになっている場合)、空の href 属性 (または "#") を使用することはできませんが、イベント ( e) 変数。私は自分のディレクティブを作成しました：

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

HTML の場合:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>
于 2013-09-16T15:23:54.037 に答える
2

href に移動したくない場合は...マークアップを変更し、アンカータグではなくボタンを使用する必要があります。意味的にはアンカーでもリンクでもないためです。逆に、いくつかのチェックを行ってからリダイレクトするボタンがある場合、それはボタンではなくリンク/アンカー タグにする必要があります... SEO の目的と [ここにテスト スイートを挿入] をテストするためです。

変更を保存するように促したり、ダーティな状態を確認したりするなど、条件付きでのみリダイレクトしたいリンクの場合... ng-click="someFunction($event)" を使用し、validationError preventDefault または stopPropagation の someFunction で使用する必要があります。

また、できるからといって、すべきであるとは限りません。javascript:void(0) は昔はうまく機能していました...しかし、悪意のあるハッカー/クラッカーのせいで、ブラウザーは、href 内で javascript を使用するアプリ/サイトにフラグを立てます...上記のダックタイプの理由を参照してください..

2010年はボタンのように機能するリンクを使用する理由はどこにもないはずなので、2016年です...それでもIE8以下をサポートする必要がある場合は、事業所を再評価する必要があります.

于 2016-01-05T04:25:37.550 に答える
2

アンギュラー ブートストラップ ドロップダウンにアンカーを使用しているときに、この同じ問題に遭遇しました。望ましくない副作用 (つまり、 preventDefault() を使用しているためにドロップダウンが閉じない) を回避するために私が見つけた唯一の解決策は、次を使用することでした。

 <a href="javascript:;" ng-click="do()">Click</a>
于 2014-11-19T20:42:06.000 に答える
1

あなたがすべきことは、href属性を完全に省略することです。

element ディレクティブ (Angular コアの一部)のソース コードを見ると、 29 ～ 31 行目に次のように記述されています。a

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

これは、Angular がすでに href なしのリンクの問題を解決していることを意味します。まだ残っている唯一の問題はcssの問題です。ng-clicks を持つアンカーにポインター スタイルを適用することもできます。

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

したがって、機能を実行するリンクとは微妙に異なるスタイルで実際のリンクをマークすることで、サイトをよりアクセスしやすくすることもできます.

ハッピーコーディング！

于 2016-04-13T11:58:29.627 に答える
-1

代替案は次のとおりです。

<span ng-click="do()">Click</span>
于 2013-05-10T21:11:32.730 に答える