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

Question

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

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

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

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

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

Answer 1

別の解決策は次のとおりです。

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

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

Answer 2

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

Answer 3

Angular では、<a>s はディレクティブです。そのため、空hrefまたは noがある場合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();
      }
    });

これは、欠落しているシナリオを示すplkrです。href

Answer 4

これは、IE 9 および AngularJS v1.0.7 で機能しました。

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

実用的なソリューションについてのduckeggsのコメントに感謝します!

Answer 5

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

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

Answer 6

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

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

 $scope.logout = function(event)


 {
event.preventDefault();
alert("working..");
}