hrefはAngular.jsのng-clickをオーバーライドします

118

両方のhref属性とng-click属性が定義されている場合：

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

このhref属性はng-clickよりも優先されます。

ng-clickの優先度を上げる方法を探しています。

href Twitter Bootstrapには必須ですが、削除できません。

html  angularjs  anchor  markup 
— ポール
ソース
「hrefはTwitter Bootstrapに必要です」について詳しく教えてください。それのどの部分？CSSまたはJavaScript？
— pkozlowski.opensource 2013
Twitter Bootstrap navの「ウィジェット」は、リンクを使用するように設定されています。ボタンを追加すると、リンクのように見えるようにスタイル設定されたものでも、ナビゲーションのスタイルが崩れます。おそらくセマンティックHTMLではありませんが、@ sketchfemmeのソリューションは、私（そしておそらくPaul）が望んでいることを実行します。
— BenCr
私が言ったことはすべて無視します。適切なHTMLとクラスを使用すれば、navbarはボタンと完全に連携します。getbootstrap.com/components/#navbar
— BenCr
空のURLを使用するというMithuの回答を受け入れる必要があります
— Peter Morris
1
@Paul元の投稿者は、ナビゲートしないように<a href>を取得する方法を尋ねました。受け入れられた答えは、ボタンに切り替えることです。これは機能しますが、それは問題の解決策ではありません。特に、私のように、ブートストラップメニューか何かであるため、<a href>を使用せざるを得ません。この特定の質問に対する正しい解決策は、空のURLを使用することです<a href="" ng-click="whatever()">ログアウト</a>-私はそれをテストし、動作することを確認できます。ありがたいことに、他の誰かが正しい答えを提供したか、私はまだ行き詰まっているでしょう。
— Peter Morris

回答:

35

URIが必要ない場合は、おそらくボタンタグを使用する必要があります。

— ジェフ
ソース
はい、Twitter Bootstrapでどのように必要かについて詳しく説明していただければ、私がさらにお手伝いできます。
— ジェフ
これは検索エンジンでどのように機能しますか？私はAngularJSルーティングを使用しており、サービスの状態を維持する必要があるため、すべての内部アプリケーションリンクで$ locationを使用していますが、hrefを削除すると、検索エンジンがサイトをたどることができなくなります。
— Darrrrrren 2014年
2
ボタンはその中に他の要素を持つことができないので、スタイリングのためにあなたはそれをしたくないでしょう-あなたがその中に何かが必要な場合。
— sheriffderek 2016年
246

Angular Documentation Siteの次の例は、href空の文字列に割り当てることさえせずに実行しています。

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

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

— ホーマン
ソース
3
これを試してみると、すべてのリンクがアクセスされているように見えますが、これは私が求めている動作ではありません。もう1つの方法（href="#"）はページのリロードを引き起こしますが、これも誤りです。
— Rhys van der Waerden、
4
これにより、IE9はハンドカーソルを表示しなくなります。を使用してhref=""解決します。
— Juampy NR、2015
1
@juampy、リンクの引き渡しはCSSで処理できます。この回答は、AngularJSが公式に行う方法です。
— thenetimp 2015年
＃はハッシュリンクのように扱われます。
— sheriffderek 2016年
3
<a href="javscript:void(0)" ng-click="logout()">Sign out</a>もお
— 役に立ち
88

テンプレートで直接クリックイベントのデフォルトの動作を直接防ぐことができます。

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

角度のドキュメントごとに、

ngClickやngFocusなどのディレクティブは、その式のスコープ内で$ eventオブジェクトを公開します。

— アトロバーツ20
ソース
11
これは素晴らしいソリューションです。hrefがある場合は、右クリックして新しいタブで開くことができますが、左クリックするとng-clickが呼び出されます。まさに私が探していたもの
— トム・グラント
もう一度いい答えです。左と右の両方のクリック作業
— Jay Jay Jay
ルーティングをトリガーすることなく、Bootstrapカルーセルコントロールを許可するのに最適です。ありがとう！
— Jason Maggard 2016年
パーフェクト！リンクを続けてGoogleでより多くのインデックスを取得し、ng-clickを使用してAjaxで呼び出すことができます。ありがとう。
— ギルヘルムIA
優れたソリューション、迅速かつ便利。ありがとう！
— Josue Rocha、2017
72

ここに別の解決策があります：

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

つまり、href属性から＃を削除するだけです

— ムハンマド・トウフィケ・イマーム
ソース
1
尋ねられた質問に対しては、これが解決策であるべきです。Angular 1.1.5にも対応
— Sindre 2013
18
<a href="" ng-click="">により、Android 2.3.xブラウザーでのng-clickが妨げられるようです。私は最終的に<a href="javascript:void(0)" ng-click="">を使用
— duckegg
1
ダッケッグの提案は最高です
— イジー・ビプジク
26

もう1つヒント。（ブラウザーのアクセシビリティーをサポートするために）実際のURLが必要な場合は、以下を実行できます。

テンプレート：

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

指令：

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

このようにして、linkClicked（）内のコードは、リンクに移動する前に実行される可能性があります

— mPrinC
ソース
このソリューションは機能し、左クリックの動作のみを変更し、右クリックはそのままです（コンテキストメニュー）。そのため、実際に質問に直接答えるTooMuchTenaciousと比較して、これはより一般的なソリューションです。
— Exocom、2015年
21

Angularでは、<a>sはディレクティブです。そのため、空hrefまたはがないhref場合、Angularはを呼び出しますevent.preventDefault。

ソースから：

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

ここだplnkr行方不明実証hrefシナリオが。

— pdoherty926
ソース
13

これは、IE 9とAngularJS v1.0.7で私にとってはうまくいきました：

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

実用的なソリューションに対するduckeggsのコメントに感謝します！

— ハーモン
ソース
機能します。リンクはURLを変更せず、訪問済みとしてマークされません。ベストアンサー！
— Jim109 2015
10

この質問に対する回答は非常に多くありますが、実際にここで何が行われているのかについては少し混乱しているようです。

まず、あなたの前提

「hrefはAngular.jsのng-clickをオーバーライドします」

間違っている。実際に起こっていることは、クリック後、クリックイベントが最初にangular（ng-click角形1.xとclick角形2.x +のディレクティブによって定義される）によって処理され、その後伝播し続けます（これにより、最終的にブラウザーがトリガーされ、href属性で定義されたURL ）（JavaScriptでのイベント伝播の詳細については、こちらを参照してください）

これを回避したい場合は、EventインターフェースのpreventDefault()メソッドを使用してイベントの伝播をキャンセルする必要があります。

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

（これは純粋なjavascript機能であり、angularとは関係ありません）

これで既に問題は解決していますが、これは最適な解決策ではありません。Angularは当然ながらMVCパターンを促進します。このソリューションでは、HTMLテンプレートがJavaScriptロジックと混合されます。これをできるだけ避けて、ロジックを角度コントローラーに配置する必要があります。だからより良い方法は

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

そして、あなたのlogout（）メソッドで：

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

これでクリックイベントはブラウザに到達しないため、が指すリンクをロードしようとしませんhref。（ただし、ユーザーがリンクを右クリックして直接リンクを開いた場合、クリックイベントはまったく発生しません。代わりに、href属性が指すURLが直接読み込まれます。）

ブラウザの訪問済みリンクの色に関するコメントについて。繰り返しますが、これは角度とは関係ありませんhref="..."。デフォルトでブラウザがアクセスしたURLをポイントしている場合、リンクの色は異なります。これはCSS：visited Selectorによって制御されます。CSSを変更して、この動作をオーバーライドできます。

a {
   color:pink;
}

PS1：

いくつかの回答は使用することをお勧めします：

<a href .../>

href角度指令です。テンプレートがangularで処理されると、これは次のように変換されます

<a href="" .../>

これら2つの方法は基本的に同じです。

— キャンナー
ソース
5

hrefの前にng-clickと書いてください。 

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

"＃"をhrefから削除する必要はないと思います。以下はAngularjs 1.2.10で動作します

<a href="#/" ng-click="logout()">Logout</a>
— サウラブ
ソース
1

これを試すこともできます：

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
— リゾ
ソース
0

私に役立つ例を追加します。必要に応じて変更できます。

コントローラ内に次のコードを追加します。

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

ビューページには、次のコードを追加します。

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>
— ベルギガモハメドアミン
ソース
0

ログアウト関数自体の内部でリダイレクトを試みましたか？たとえば、ログアウト関数が次のようであるとします

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

その後、あなたはただ持つことができます 

<a ng-click="logout()">Sign out</a>
— Strizzwald
ソース
0

こちらをご確認ください

<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>
— クリシュナ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.