web-dev-qa-db-ja.com

ng-clickを使用するときに「新しいタブで開く」を許可するにはどうすればよいですか？

HTMLのテーブルがあり、各行が異なるページに移動し、その行の詳細が表示されます。しかし、angularjsを使用しているため、ngキーを押しながらクリックすると、この行を右クリックして「新しいタブで開く」を選択できません。それを解決する方法はありますか？

前もって感謝します！

htmlangularjsangularjs-ng-click
23
jgabrielfaria

可能であれば、要素をアンカー要素に変換する必要があります。

<a ng-href="{{ your dynamic url }}" ng-click="your function">Your link text</a>

ブラウザは要素をリンクとして解釈し、そのため正しいドロップダウンを提供します。新しいタブで開くには、正しいhref値も必要であることに注意してください。

EDIT：JQueryを使用してこの種の動作を修正する方法について、より詳細な回答が必要な場合は この質問 をお勧めします。

27
Erex

Ng-click関数内でwindow.open(url, '_blank')を呼び出すことができますが、Word of warningとして、これはブラウザと現在の設定に依存します。

場合によっては、これはポップアップウィンドウで開き、他の場合では新しいタブで開きます。 JavaScriptはブラウザーに依存しないため、どちらの動作も強制する方法はありません。単に新しいウィンドウを要求しただけで、ブラウザーの実装方法はブラウザー次第です。 タブまたはウィンドウの強制に関する説明はこちらを参照

ただし、その右クリックオプションまたはCtrlキーを押しながらクリックして新しいタブを開く唯一の方法は、ブラウザに<a>タグ。それ以外の場合、リンクとしては扱われません。

2
David Beech

何らかの条件に基づいてhrefを動的に生成する場合は、ng-mousedownイベントにhrefを設定し、その後open link in new tabなどのイベントを実行できます。 open link in new windowおよびclick。

HTML：

<a href="javascript:void(0)" ng-mousedown="openDetailView($event, userRole)">{{label}}</a>

JS：

  $scope.openDetailView = function (event, userRole) {
         if(userRole == 'admin') {
             jQuery(event.target).attr('href', 'admin/view');

         } else {
             jQuery(event.target).attr('href', 'user/view');

         }
  };
1
Rubi saini

テーブル行内でアンカー要素を使用する必要があります。

[〜＃〜] html [〜＃〜]

<tr>
    <a ng-href="dynamic url" ng-click="openItem($event)">Open the item</a>
</tr>

コントローラー

$scope.openItem = function (event) {
    event.preventDefault();
    // code to open a item
}
1
Fizer Khan