동일한 URL을 가진 AngularJS UI-Router 여러 상태

Question

AngularJS 및 AngularUIUI 라우터 ui-router를 사용하여 만든 다중 페이지 양식이 있습니다. 각 단계에는 자체 URL이 있습니다 (/ step1 ->/step2 ->/step3). 2 단계에서 양식은 사용자에게 2 가지 옵션 중 하나를 선택할 수있는 옵션을 제공합니다. 어떤 옵션을 선택했는지에 따라 두 가지 상태 중 하나로 사용자를 보낼 수 있기를 원하지만 두 상태 중 어느 것이 선택되었는지에 관계없이 URL이/step3으로 변경되기를 원합니다.

저는 두 개의 대체 상태를 다른 상태 (아래 참조)로 설정하는 것을 비롯하여 상위 (단계 -3-a)가 표시되고 추상화가되는 등 많은 노력을 기울였습니다. 부모 단계 (3 단계)와 두 자식 단계 (3 단계, 3 단계 및 3 단계 단계)와 onEnter 이벤트 및 전환을 사용하여 라우팅합니다. 이 두 가지 모두 내용을 올바르게 표시하지 못했습니다 (후자는/user/userId로 사용자를 보냈습니다).

이 매너를 라우팅 할 수 있어야하지만 제대로 작동하지 않는 것처럼 보입니다. 어떤 도움이나 충고라도 기꺼이 받아 들여질 것입니다.

감사

당신이 잘못 상속을하고있는

$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: { 
     ... 
     } 
    }) 

Answer 1

. 부모와 자녀는 점으로 구분해야합니다. 구성은 다음과 같아야합니다.

.state('step-3', { 
    abstract: true, 
    url: '/step3', 
    data: { 
    ... 
    }, 
    views: { 
    ... 
    } 
}) 
.state('step-3.a', { 
    data: { 
    ... 
    }, 
    views: { 
    ... 
    } 
}) 
.state('step-3.b', { 
    data: { 
    ... 
    }, 
    views: { 
    ... 
    } 
}) 

이렇게하면 두 자녀 상태 모두 부모의 URL을 반영합니다.