Angularjs $ state open link in new tab

Question

I am trying to implement the "open link in a new tab" function using the $ state.go function. It would be great if there was something like:

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

Is there a way to do this using AngularJS?

Thank,

Alex

Answer 1

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

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

Answer 2

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

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

It saves the problem of adding code to your controller and gives you a hover url like with any regular link. Win-win!

Answer 3

It may not work on localhost if your application is in a subfolder. I had the same problem.

I tried online and it worked as expected using:

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

Answer 4

I had a similar problem, try if none of the previous answers work for you.

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

So basically when working in localhost without adding '#' it just redirected to

local / preview

instead

local / PROJECT_NAME / # / preview

I'm not talking about data transfer here, just to open $ state in a new tab.

Answer 5

Try it!

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

Answer 6

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

this code solved my problem.

use this in the anchor tag.

Answer 7

The best answer I found is the ui.router extension, since the function does not exist. You can find the full information here:

Angular Extension 1.x ui-router $ state.go

However, here is my brief explanation of what needs to be done, add this to app.js or the file with the corner app app:

 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 can:

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