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

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.


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.


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');

         }
  };