stateParams in url of abstract state, ui-router, angularjs

Question

if i have an abstract state:

$stateProvider.
        state('drug', {
            abstract: true,
            url: '/drug/:drugId',
            template:
            '<ui-view></ui-view>',
            resolve: {
                drugId : ['$stateParams', function($stateParams){
                    return $stateParams.drugId;
                }]
            }
        }

that have some child states, in form: drug.x,drug.y and I want to choose, in one place in the app, a drugId that will come through the abstract state to all the child states, so that after that when i call to 'drug.x' state, it'll have the drugId value - where and how i do this one call to drug state with drugId param? I know that I can't call the abstract state itself.

thanks.

Chris T · Accepted Answer · 2015-02-23 00:31:03Z

3

You have already done the tricky part by exposing $stateParams.drugId as a resolve. Now you just inject it into your substate controller like so:

$stateProvider.state('drug.x', {
  controller: function(drugId) { } // drugId is injected from the resolve you defined in 'drug'
}

To provide the parameter to drug.x, you simply add it to the transition parameters:

$state.go('drug.x', { drugId: 123 });

or

<a ui-sref="drug.x({ drugId: scopeVariable })">Go to drug.x for {{ scopeVariable }}</a>

answered Feb 23, 2015 at 0:31

Chris T

8,2262 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

arielorvits Over a year ago

what i'm asked is where and when can i pass drugId into the abstract state? thanks

Chris T Over a year ago

When transitioning to 'drug.x', the abstract state 'drug' will "receive" the parameter. When applying a set of parameters to a transition, those parameters are made available to the "to state", as well as all the parent states of that "to state", including abstract states. Said another way, you don't pass parameters to states, you provide them to a transition.

arielorvits Over a year ago

so, if i passed this param to one child of drug, this param will stay in it's value for all it's children until i'll call other child state with other param value? thanks!

Chris T Over a year ago

Basically, yes. If you $state.go('drug.y') or $state.go('drug.x.a'), the drugId stays the same. This, by the way, is due to go default options including inherit: true. See docs for $state.go: angular-ui.github.io/ui-router/site/#/api/…. If you are on drug.x and you do $state.go(drug.x, { drugId: 456 }), the parameter obviously changes as well.

Chris T Over a year ago

Also, do not think of "passing parameters to states". You transition to a state and supply parameters for the transition (not for the state).

Collectives™ on Stack Overflow

stateParams in url of abstract state, ui-router, angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related