Pass State params using URL Routing to a new tab in AngularJS without showing up in the url

Question

I am using AngularJS with ui-router. I am trying to pass the parameters to a new tab. So I am passing the params from the state to controller without showing up in the URL. I am using the Params of $state.href like so:

In js file,

var paramValues = { 'path': true, 'logoValue': 123};
var achiveRoute = $state.href('state123', paramValues);
$window.open(achiveRoute, '_blank');

In state file,

.state("state123", {
    url: "/sessiontimeline",
    templateUrl: /partials/session.html,
    params : { 'path': true, 'logoValue': null }
}

I am trying to access these params in the controller using StateParams.

var logoValue = $stateParams.logoValue;

But logoValue is showing undefined.

How do I set/read the path parameters from the route?

Answer 1

In order to pass those parameters on the querystring, you have to define your route such that it will accept them on the querystring. What's happening right now is that you don't have a state defined with a URL that accepts parameters on the querystring, so it is using the defaults that you have specified in your state (true for path and null for logoValue). Here's how you should define your state to accept those parameters on the querystring:

.state("state123", {
    url: "/sessiontimeline?path?logoValue",
    templateUrl: /partials/session.html,
    params : { 'path': true, 'logoValue': null }
}

With the above configuration you can pass the parameters either directly through a $state.go call or via the querystring and your $state.href('state123', paramValues) should output /sessiontimeline?path=true&logoValue=123.