성공적인 상태 변경 후 UI 라우터가 주소 표시줄의 URL을 업데이트하지 못함
-
20-12-2019 - |
문제
저는 작은 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
재생산 단계:
- 이동 http://run.plnkr.co/plunks/ZqMIYNU6abEAndAM5nx1/#/aircraft/1/checklists
- 첫 번째 링크를 클릭하세요.올바른 상태를 표시하기 위해 뷰가 업데이트되지만 URL은 그대로 유지됩니다.
/#/aircraft/1/checklists
.
이상한 점은 다른 방법으로 이 상태로 다시 탐색하면 URL이 완벽하게 업데이트된다는 것입니다.예를 들어(위의 1단계와 2단계를 따랐다고 가정):
- 맨 아래로 스크롤하여 다음을 클릭하세요.
Next Phase
링크.상태가 변경되고 URL이 업데이트됩니다. - 이 새로운 보기에서 아래로 스크롤하여 다음을 클릭하세요.
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
(위의 첫 번째 줄 참조) ...확인해 봐 여기