Angularjs $state open link in new tab

Question

I'm trying to implement an "open link in new tab" function using $state.go function. It would be awesome if there was smth like:

$state.go('routeHere', {
    parameter1 : "parameter"
    }, {
    reload : true,
    newtab : true // or smth like target : "_blank"
});

Is there any way to do that using AngularJS?

The Edit in the question saying that you solved it with the following code seems redundant. Ie. it's implied by the fact that you chose it as your accepted answer. — Adam Zerner, Apr 15 '15 at 01:50
You may find the answer here [Angularjs $state open link in new tab](https://stackoverflow.com/a/51565518/1959948) — Dalorzo, Jul 28 '18 at 04:33

score 157 · Accepted Answer · answered Mar 16 '15 at 11:04

157

Update: OK, I just solved it using the following code:

var url = $state.href('myroute', {parameter: "parameter"});
window.open(url,'_blank');

answered Mar 16 '15 at 11:04

Alex Arvanitidis

4,403
6
26
36

20

Shouldn't that be $window for best practice? – Taku Feb 25 '16 at 09:13
3

Are you sure the parameter can be passed to new window? – hjl Apr 07 '16 at 07:09
Yes @elaijuh they will be passed – Manuel Di Iorio Apr 20 '16 at 08:15
@alex i want to target a defined window, so i tried window.open(url,'myWindow'); but it doesnt work. Any help? – mhd Jun 14 '16 at 19:37
Add a third parameter, something like: window.open(url, 'myWindow', "height=200,width=200"); Most probably it will work like this. – Alex Arvanitidis Jun 15 '16 at 08:39
I am doing it in this way and all I get is a blank page. If I place the same url into Browser directly I am getting the correct results. Any idea? – Mark Nov 13 '16 at 12:30
By this approach state params are not receiving in new tab. Could any one please help me with this? – kernal_lora Mar 20 '17 at 08:53
1

Note that if you do open a link from javascript this way and that the base url changes, chances are the browser will block it saying the site tried to open a popup, but if user accepts or authorize your website to do so, then it will work. – GabLeRoux Jul 19 '17 at 14:18
Also if using coffeescript, add `return true` as well since it will add it as a DOM element other wise and throw an [error like this](https://github.com/angular/angular.js/issues/4853) – catch22 Dec 15 '17 at 19:40

score 55 · Answer 2 · answered Jun 15 '14 at 04:26

55

I just tried this -- apparently, adding target="_blank" works with ui-sref:

<a ui-sref="routeHere" target="_blank">A Link</a>

Saves the trouble of adding code to your controller, and gives you the URL on hover as with any normal link. Win-win!

answered Jun 15 '14 at 04:26

Patrick Calulo

660
4
5

3

this only works on an . "target" doesn't work on other elements apparently. i.e – Luis Dec 20 '15 at 00:43
2

@Luis Buttons dont have Target attribute so yes it wont work – gerl Jan 26 '17 at 16:06
1

@Luis Maybe you can use button related classes and role as button for anchor tag to make it look like a button. Eg.: `A Link` – Safwan Feb 15 '18 at 08:15

FrancescoMussi · Answer 3 · 2017-02-15T13:19:53.440

7

It may not work on localhost in the event your app is in a subfolder. I had in fact the same issue.

I have tried online and it worked as expected by using:

<a ui-sref="routeHere" target="_blank">Link</a>

edited Feb 15 '17 at 13:19

answered Jan 16 '15 at 09:00

FrancescoMussi

20,760
39
126
178

score 7 · Answer 4 · answered Nov 11 '16 at 13:42

I had a similar issue, try this if nothing from previous answers work for you.

var url = '#' + $state.href('preview');
window.open(url,'_blank');

So basically while working in localhost, without appending '#' it was just redirecting to

localhost/preview

, instead of

localhost/Project_Name/#/preview

I'm not taking here about passing the data, just to open $state in new tab.

score 6 · Answer 5 · edited May 27 '17 at 11:10

6

ui-sref="routeHere" href=""target="_blank"

this code solved my problem.

use this in an anchor tag.

edited May 27 '17 at 11:10

SO-user

1,458
2
21
43

answered May 25 '17 at 04:29

Zubair sadiq

500
6
23

Dalorzo · Answer 6 · 2018-07-27T21:12:49.627

The best answered I found, was extending the ui.router, since the feature, does not exist build in. You may find the full detail here :

Extending the Angular 1.x ui-router's $state.go

However, here is my short explanation of what needs to be done add this to app.js or angular app init file:

angular.module("AppName").config(['$provide', function ($provide) {
    $provide.decorator('$state', ['$delegate', '$window',
        function ($delegate, $window) {
            var extended = {
                goNewTab: function (stateName, params) {
                    $window.open(
                        $delegate.href(stateName, params, { absolute: true }), '_blank');
                }
            };
            angular.extend($delegate, extended);
            return $delegate;
        }]);
}]);

In your code

You will be able to do:

$state.goNewTab('routeHere', { parameter1 : "parameter"});

Miko · Answer 7 · 2016-08-28T18:06:05.440

3

Try this!

<a ui-sref="routeHere({parameter: vm.parameter})" target="_blank"></a>

edited Aug 28 '16 at 18:06

answered Aug 28 '16 at 18:00

Miko

57
4

This is irrelevant, I didn't say I need to add parameters to the route I call, I said I want to open this route in a new tab. – Alex Arvanitidis Aug 29 '16 at 07:39
1

This may be relevant for many people. I just used this. One thing to mention here is that parameter name should be in single quotes. – Sudheer Muhammed Apr 30 '19 at 04:32

Angularjs $state open link in new tab

7 Answers7

Linked