How to allow 'Open in a new tab' when using ng-click?

Question

I have a table on HTML and each row leads to a different page, with more details about that row. But as I am using angularjs, with ng-click I can't right click this row and select 'open in a new tab'. Is there any way to solve it?

Thanks in advance!

Have you read this yet? http://stackoverflow.com/questions/17757837/when-click-a-button-then-open-a-new-tab-in-angular-js — Sterling Archer, Apr 14 '14 at 20:15
Yep, but that is not my problem. I dont want to ALWAYS open in a new tab, but with ng-clik this window doesn't appear when you right-click the row: http://puu.sh/88Mbz.png — jgabrielfaria, Apr 14 '14 at 20:26
That was all that I wanted, but the browser isn't managing. this is what happens when right click the row http://puu.sh/88Nss.png. It doesn't interpret as a link. — jgabrielfaria, Apr 14 '14 at 20:43
You should convert your element to href ``. Not only do you have to show the correct dropdown, but also have a correct href value to open in a new tab. — Erex, Apr 15 '14 at 13:51
No problem @jgabrielfaria, added a answer, and would appreciate it if you marked it as correct answer 8-) — Erex, Apr 16 '14 at 11:44

Erex · Accepted Answer · 2017-07-05T10:24:18.540

30

If possible you should convert your element to an anchor element.

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

The browser will interpret the element as a link, and will therefor give you the correct dropdown. Note that you also have to have the correct href value to open in a new tab.

EDIT: I would recommend this question if you want a more detailed answer on how to fix this kind of behaviour using JQuery.

edited Jul 05 '17 at 10:24

answered Apr 16 '14 at 11:42

Erex

1,625
1
17
21

This is a little confusing. The example makes it sound like I need both `ng-href` and `ng-click` on the same element. – Travis Parks Mar 18 '15 at 15:16
I can see that. But the question was "How to allow 'Open in a new tab' when using ng-click?" Interrpeted it as he wanted to have the 'Open in a new tab' option on a element that also used ng-click. – Erex Mar 19 '15 at 10:44
You would only need either ng-click or ng-href , if you want both of them to open the link in a new tab . The angularJS code checks if the browser URL is same as the one on the ng-href and switches urls if they are not . – Roshan Khandelwal Nov 03 '15 at 12:28
This may technically work, but Chrome blocks this as a pop-up. Most users are not savvy enough to notice this and permit the site, so be wary about your user experience. – Womble Aug 15 '18 at 20:32

score 2 · Answer 2 · edited May 23 '17 at 12:02

Inside your ng-click function you can call window.open(url, '_blank') however as a word of warning, this will depend on the browser and current settings.

In some cases this will open in a pop-out window and in other cases it will open in a new tab. There is no way to force either behavior as the javascript is browser agnostic, it has simply requested a new window and it is up to the browser the decide how to implement it. see here for a discussion on forcing a tab or window

However the only way to get that right-click option or the ctrl+click to open in a new tab is if the browser sees a <a> tag. Otherwise it doesn't treat it as a link.

score 1 · Answer 3 · answered Oct 20 '15 at 05:15

If you want to generate your href dynamically based on some condition then you can set your href on ng-mousedown event and after that you can perform any event like open link in new tab, open link in new window and 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');

         }
  };

score 1 · Answer 4 · answered Mar 17 '16 at 10:39

1

You have to use anchor element inside the table row.

HTML

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

Controller

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

answered Mar 17 '16 at 10:39

Fizer Khan

88,237
28
143
153

How to allow 'Open in a new tab' when using ng-click?

4 Answers4

Linked