UI Router no puede actualizar la URL en la barra de direcciones después de un cambio de estado exitoso

Question

Estoy creando una pequeña aplicación Angular y actualmente estoy usando ui-router.

Me encontré con un problema que se parece muchísimo a un error en ui-router, pero no puedo estar seguro porque no estoy muy familiarizado con esta biblioteca.Cuando el usuario hace clic en un enlace específico, aunque el estado de vista correcto se carga como se esperaba, la URL en la barra de direcciones no se actualiza.

Estoy usando el enrutador ui ui-sref directiva para generar automáticamente la URL para el estado.Por ejemplo, en la vista de lista de verificación utilizo el siguiente código:

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

Reduje mi aplicación y la convertí en un Plunker para que, con suerte, otros puedan reproducir el problema.El problema también se puede observar en este vídeo: https://www.youtube.com/watch?v=EW9CFe6LfCw

Pasos de reproducción:

1. Ir a http://run.plnkr.co/plunks/ZqMIYNU6abEAndAM5nx1/#/aircraft/1/checklists
2. Haga clic en el primer enlace.Observe que la vista se actualiza para mostrar el estado correcto, pero la URL permanece en /#/aircraft/1/checklists.

Lo extraño es que volver a este estado por otros medios actualiza la URL perfectamente.Por ejemplo (suponiendo que se hayan seguido los pasos 1 y 2 anteriores):

1. Desplácese hasta el final y haga clic en Next Phase enlace.Tenga en cuenta que el estado cambia y la URL se actualiza.
2. Desplácese hacia abajo en esta nueva vista y haga clic Previous Phase.Tenga en cuenta que el estado anterior se recarga y esta vez la URL se actualizó correctamente.

¿Estoy usando ui-router incorrectamente o estoy haciendo algo incorrecto para provocar este comportamiento?

Answer 1

Controlar aquí Versión actualizada

en tu estado 'check-lists' usted proporciona ui-sref a 'checklist-phase'

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

Y el 'checklist-phase' se define como un estado hijo de 'checklist-detail'

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

y el estado 'checklist-detail' tiene un controlador que llama a $state.go

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

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

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

No hagas eso...simplemente retira el $state.go - porque ya estás navegando hacia el checklist-phase (ver las primeras líneas arriba) ...revisalo aquí