web-dev-qa-db-ja.com

Angular.jsでhrefがng-clickをオーバーライドする

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

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

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

Ng-clickの優先順位を上げる方法を探しています。

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

htmlangularjsanchormarkup
107
Paul

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

35
Geoff

角度付きドキュメンテーションサイトのこの例では、空の文字列に代入しなくてもhrefを実行します。

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

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

241
Homan

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

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

によると 角度ドキュメンテーション 、

NgClickやngFocusなどのディレクティブは、その式の範囲内で$ eventオブジェクトを公開します。

79
atroberts20

これは別の解決策です：

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

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

71
Muhammad Towfique Imam

もう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（）内のコードは、リンクに移動する前に実行される可能性があります。

25
mPrinC

Angularでは、 <a>はディレクティブ です。そのため、空の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の欠落シナリオを示しています。

21
pdoherty926

これはIE 9とAngularJS v1.0.7で私のために働きました：

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

実用的な解決策をありがとう duckeggsのコメント ！

13
Harmon

この質問に対する答えはたくさんありますが、実際に起こっていることについて少し混乱があるようです。

まず、あなたの前提

"Angular.jsでhrefがng-clickをオーバーライドする"

間違っている。実際に起こっていることは、クリックの後、クリックイベントはまずangle（角度1.xのng-clickディレクティブとangle 2.x +のclickで定義されています）によって処理され、それから伝播し続けます。 （href属性で定義されたURLへ）（javascriptでのイベント伝播についての詳細は this を参照）

これを避けたい場合は、 EventインターフェースのpreventDefault()メソッド を使ってイベントの伝播をキャンセルしてください。

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

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

今、これはあなたの問題をすでに解決しますが、これは最適な解決策ではありません。 Angularは、当然のことながら MVCパターン を促進します。このソリューションでは、あなたのhtmlテンプレートはjavascriptロジックと混在しています。あなたはできるだけこれを避けて、あなたの論理をあなたの角度コントローラに入れるように試みるべきです。だからより良い方法は

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

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

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

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

ブラウザのリンクカラーの訪問についてのコメントに関して。ここでもまた、これは角度とは関係ありません。あなたのhref="..."があなたのブラウザによってデフォルトで訪問されたURLを指しているならば、リンクの色は異なります。これは CSS：visited Selector によって制御されます。この振る舞いを上書きするようにCSSを変更することができます。

a {
   color:pink;
}

PS1：

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

<a href .../>

hrefは角度指示子です。あなたのテンプレートが角度によって処理されるとき、これはに変換されます

<a href="" .../>

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

7
Caner

ちょうどhrefの前にng-clickを書く..それは私のために働いた

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" 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>
5
Anna

Hrefから "＃"を削除する必要はないと思います。 Angularjs 1.2.10での作品フォロー

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

あなたもこれを試すことができます：

<div ng-init="myVar = 'www.thesoftdesign'">
        <h1>Tutorials</h1>
        <p>Go to <a ng-href="{{myVar}}">{{myVar}}</a> to learn!</p>
</div>
1
Rizo
//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>
0
Krishna

これは私のために働く

<a href (click)="logout()">
   <i class="icon-power-off"></i>
   Logout
</a>
0
Soukaina Benchekroun

ログアウト機能自体の内部にリダイレクトしてみましたか？たとえば、ログアウト機能が次のようになっているとします。

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

それならあなたはただ持つことができます

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

私はあなたのために私のために働く例を追加します、そしてあなたはあなたが望むようにそれを変えることができます。

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

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

そして私のビューページには、以下のコードを追加します。

<a  href="" ng-model="showNumber" ng-click="showNumberFct()" ng-init="showNumber = false" >Click Me!!!</a>
0
BERGUIGA Mohamed Amine

これをチェックしてください

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

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}
0
Ajay Malhotra