Маршрутизатору пользовательского интерфейса не удается обновить URL-адрес в адресной строке после успешного изменения состояния

Question

Я создаю небольшое приложение Angular и в настоящее время использую ui-router.

Я столкнулся с проблемой, которая ужасно похожа на ошибку в ui-router, но я не могу быть уверен, так как я не очень хорошо знаком с этой библиотекой.Когда пользователь нажимает на определенную ссылку, хотя правильное состояние просмотра загружается, как и ожидалось, URL-адрес в адресной строке не обновляется.

Я использую ui-маршрутизатор ui-sref директива для автоматической генерации URL-адреса для состояния.Например, в представлении списка контрольных списков я использую следующий код:

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

Я сократил свое приложение и превратил его в плагин, так что, надеюсь, проблема будет воспроизводима другими.Проблему также можно увидеть в этом видео: 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 или делаю что-то еще неправильно, чтобы вызвать такое поведение?

Answer 1

Проверять здесь обновленная версия

О вашем состоянии 'check-lists' вы предоставляете пользовательский интерфейс для '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 (смотрите первые строки выше) ...проверь это здесь