javascript - AngularJS UI-Router multiple states with same URL -
i have multipage form made using angularjs , angularui router ui-router. each step has it's own url (/step1 -> /step2 -> /step3). @ step 2 form offers user choice between 2 options. depending on option selected want able send user 1 of 2 states, no matter of 2 states selected want url change /step3.
i have tried numerous efforts work including having 2 alternative states 1 child of other (shown below) resulting in parent (step-3-a) being shown, , having abstract parent step (step-3) url , 2 child steps (step-3-a, , step-3-b) , routing using onenter event , transition. both of these failed display content correctly (the latter kicked user out /user/userid).
it must possible route in manor can't seem make work. or advice gratefully received.
thanks
$stateprovider .state('form', { abstract: true, views: { ... } }) .state('user-form', { url: '/user/:userid', parent: 'form', abstract: true, views: { ... } }) .state('step-1', { parent: 'user-form', url: '/step1', data: { ... }, views: { ... } }) .state('step-2', { parent: 'user-form', url: '/step2', data: { ... }, views: { ... } }) .state('step-3-a', { parent: 'user-form', url: '/step3', data: { ... }, views: { ... } }) .state('step-3-b', { parent: 'step-3-a', data: { ... }, views: { ... } })
you're doing inheritance wrong. parents , children should dot-separated. configuration should this:
.state('step-3', { abstract: true, url: '/step3', data: { ... }, views: { ... } }) .state('step-3.a', { data: { ... }, views: { ... } }) .state('step-3.b', { data: { ... }, views: { ... } })
this way, both child states reflect url of parent.
Comments
Post a Comment