Angularjs $state open link in new tab

AngularjsAngular Ui-RouterAngular Ui

Angularjs Problem Overview


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?

Angularjs Solutions


Solution 1 - Angularjs

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

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

Solution 2 - Angularjs

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!

Solution 3 - Angularjs

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>

Solution 4 - Angularjs

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.

Solution 5 - Angularjs

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

this code solved my problem.

use this in an anchor tag.

Solution 6 - Angularjs

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"});

Solution 7 - Angularjs

Try this!

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlex ArvanitidisView Question on Stackoverflow
Solution 1 - AngularjsAlex ArvanitidisView Answer on Stackoverflow
Solution 2 - AngularjsPatrick CaluloView Answer on Stackoverflow
Solution 3 - AngularjsFrancescoMussiView Answer on Stackoverflow
Solution 4 - AngularjsDeepak BandiView Answer on Stackoverflow
Solution 5 - AngularjsZubair sadiqView Answer on Stackoverflow
Solution 6 - AngularjsDalorzoView Answer on Stackoverflow
Solution 7 - AngularjsMikoView Answer on Stackoverflow