성공적인 상태 변경 후 UI 라우터가 주소 표시줄의 URL을 업데이트하지 못함

StackOverflow https://stackoverflow.com//questions/25003155

문제

저는 작은 Angular 앱을 만들고 있으며 현재 ui-router를 사용하고 있습니다.

나는 ui-router의 버그처럼 보이는 문제에 직면했지만 이 라이브러리에 익숙하지 않기 때문에 확신할 수 없습니다.사용자가 특정 링크를 클릭하면 올바른 보기 상태가 예상대로 로드되지만 주소 표시줄의 URL은 업데이트되지 않습니다.

나는 ui-router를 사용하고 있습니다 ui-sref 상태에 대한 URL을 자동으로 생성하는 지시어입니다.예를 들어 체크리스트 목록 보기에서 다음 코드를 사용합니다.

<a ui-sref="checklist-phase({ aircraftId: checklist.aircraft, checklistId: checklist.id, phaseSlug: checklist.phases[0].slug })" ng-bind="checklist.name"></a>

내 앱을 잘라서 Plunker로 만들었으므로 다른 사람들도 문제를 재현할 수 있기를 바랍니다.이 문제는 다음 비디오에서도 확인할 수 있습니다. https://www.youtube.com/watch?v=EW9CFe6LfCw

재생산 단계:

  1. 이동 http://run.plnkr.co/plunks/ZqMIYNU6abEAndAM5nx1/#/aircraft/1/checklists
  2. 첫 번째 링크를 클릭하세요.올바른 상태를 표시하기 위해 뷰가 업데이트되지만 URL은 그대로 유지됩니다. /#/aircraft/1/checklists.

이상한 점은 다른 방법으로 이 상태로 다시 탐색하면 URL이 완벽하게 업데이트된다는 것입니다.예를 들어(위의 1단계와 2단계를 따랐다고 가정):

  1. 맨 아래로 스크롤하여 다음을 클릭하세요. Next Phase 링크.상태가 변경되고 URL이 업데이트됩니다.
  2. 이 새로운 보기에서 아래로 스크롤하여 다음을 클릭하세요. Previous Phase.이전 상태가 다시 로드되고 이번에는 URL이 올바르게 업데이트되었습니다.

이 동작을 유발하기 위해 ui-router를 잘못 사용하고 있거나 다른 작업을 잘못하고 있습니까?

도움이 되었습니까?

해결책

확인하다 여기 업데이트된 버전

당신의 주에 'check-lists' 당신은 ui-sref를 제공합니다 'checklist-phase'

<a ui-sref="checklist-phase({ aircraftId: ...

그리고 'checklist-phase' 하위 상태로 정의됩니다. 'checklist-detail'

.state('checklist-phase', {
    parent: 'checklist-detail',

그리고 국가 'checklist-detail' $state.go를 호출하는 컨트롤러가 있습니다.

.state('checklist-detail', {       
    controller: 'ChecklistDetailCtrl',
    ...

    .controller('ChecklistDetailCtrl', function ($scope.... 
    {

        $state.go('checklist-phase', {
            phaseSlug: checklistData.phases[0].slug
        }, {
            location: 'replace'
        });

그거 하지마...그냥 제거하세요 $state.go - 이미 다음으로 이동 중이기 때문입니다. checklist-phase (위의 첫 번째 줄 참조) ...확인해 봐 여기

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top