Ctrl click ng-click open page in new tab

Question

Basically I want my app to open links in new tab/page when user holds down Ctrl (on linux windows), Cmd (on OSX). What is the way to go.

Note: I cannot get rid of ng-click. the application uses it various method calls within scope.

Fearful

Don't use ng-click. Use regular links: <a href="/somePath">click here</a>. – Torse

sorry but all of application uses method calls to various methods in scope using ng-click – Fearful

Then your link is not really a link navigating to another page, but simply a way to cause side-effects in your application. And it should thus not go to another page/tab. – Torse

in what element is the ng-click? in an <a> or could it be also something else, like <div> ? – Snapp

Answer 1

Try this:

In HTML,

<div ng-click="gotoPageOrFunc($event)"></div>

In JS,

$scope.gotoPageOrFunc = function(event){
    if (event.ctrlKey==1){
        // Use windows.location or your link.
    }else{
        // Your actual functionalities.
    }
}

Howlend

Almost, should be $event though: ng-click="gotoPageOrFunc($event)" – Achelous

Answer 2

Use directive.

angular.module('myapp').directive('newtab', function() {
    return {
        restrict: 'AC',
        link: function($scope, $elem) {
            var target = $elem.attr('target');

            $elem.on('click', function(e) {
                target = $elem.attr('target');
                $elem.attr('target', '_blank');
            });

            $elem.on('blur', function() {
                $elem.attr('target', target);
            });
        }
    };
});

// UPD

usage

<a href="/my/page?foo=bar" class="newtab">xoxo<a/>
or
<a href="/my/page?foo=bar" newtab>xoxo</a>
or
<a href="/my/page?foo=bar" data-newtab>xoxo</a>

// UPD 2

<a href="/my/page?foo=bar" 
   data-ng-click="myControllerMethod()" class="newtab">xoxo<a/>
or
<a href="/my/page?foo=bar" 
   data-ng-click="myControllerMethod()" newtab>xoxo</a>
or
<a href="/my/page?foo=bar" 
   data-ng-click="myControllerMethod()" data-newtab>xoxo</a>

Waverly

how to use this directive? – Fearful

problem is i still need to call a controller method on click. I don't see that in the usage – Fearful

This won't work because just as myControllerMethod() starts to evaluate, you've left the page, possibly terminating it. – Heilner

Answer 3

This might help you

HTML

<a ng-click="getPreviousURL()" href="https://www.google.com/unlimited-plan/">More.../a>

JS

$scope.getPreviousURL = function(moreurl,category,returnurl) {
var revrl=category+'bundles';
$window.localStorage.setItem('prev_url',revrl);
**var target = $elem.attr('href');**
**window.location = target;**
};

Giddings