INTERFACE do usuário do Roteador de falha ao atualizar a URL na barra de endereço após o sucesso de alteração de estado

Question

Eu estou construindo um pequeno Angular app e atualmente estou usando a interface do usuário do roteador.

Eu tenho um problema, que parece muito como um bug na interface do usuário do roteador, mas não posso ter certeza que eu não estou familiarizado com essa biblioteca.Quando o usuário clica em um link específico, embora o correto estado de exibição é carregado como esperado, o URL na barra de endereço não atualizado.

Eu estou usando a interface do usuário do roteador ui-sref directiva para gerar automaticamente o URL para o estado.Por exemplo, na lista modo de exibição de lista que eu uso o seguinte código:

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

Eu já cortei meu app e fez uma Plunker o problema é que esperamos que pode ser reproduzido por outros.O problema também pode ser observado neste vídeo: https://www.youtube.com/watch?v=EW9CFe6LfCw

Reprodução passos:

1. Ir para http://run.plnkr.co/plunks/ZqMIYNU6abEAndAM5nx1/#/aircraft/1/checklists
2. Clique no primeiro link.Repare que a vista de actualizações para mostrar o estado correto, mas a URL permanece em /#/aircraft/1/checklists.

O que é estranho é que a navegação de volta a este estado por outros meios atualizações a URL perfeitamente.Por exemplo (assumindo que os passos 1 e 2 acima foram seguidos):

1. Role para a parte inferior e clique no Next Phase o link.Observe que as alterações de estado e o URL de atualizações.
2. Role para baixo sobre esse novo modo de exibição e clique em Previous Phase.Note que o estado anterior recarrega e, desta vez, a URL é atualizada corretamente.

Estou usando a interface do usuário do roteador de forma incorreta ou a fazer outra coisa incorretamente para causar esse comportamento?

Answer 1

Seleção aqui versão atualizada

No seu estado 'check-lists' você fornece a interface do usuário sref para 'checklist-phase'

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

E o 'checklist-phase' é definida como uma criança de estado de 'checklist-detail'

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

E o estado 'checklist-detail' possui controlador que chama $estado.ir

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

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

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

NÃO faça isso...basta remover o $state.go - porque você já está navegando para o checklist-phase (ver as primeiras linhas acima) ...check it aqui