Il router UI non riesce a aggiornare URL nella barra degli indirizzi dopo il successo del cambiamento di stato

Question

Sto costruendo una piccola app angolare e attualmente sto usando l'ui-router.

Ho colpito un problema che sembra terribilmente come un bug nel router ui-router ma non posso essere sicuro perché non ho familiarità con questa biblioteca. Quando l'utente fa clic su un collegamento specifico, sebbene lo stato di visualizzazione corretto viene caricato come previsto, l'URL nella barra degli indirizzi non viene aggiornato.

Sto usando la Direttiva ui-sreftagCode di UI-Router per generare automaticamente l'URL per lo stato. Ad esempio nella vista Elenco elenco di controllo I Utilizzo il seguente codice:

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

.

Ho abbattuto la mia app e l'ho fatto in un pinkeer in modo che il problema sia sperimentato riproducibile da altri. Il problema può anche essere osservato in questo video: https://www.youtube.com/watch?v= EW9CFE6LFCW

Passi di riproduzione:

.
1. Vai a http://run.plnkr.co/plunks/ ZQMIYNU6ABEANDAM5NX1 / # / Aircraft / 1 / Checklists
2. Fai clic sul primo link. Si noti che la vista si aggiorna per mostrare lo stato corretto, ma l'URL rimane a /#/aircraft/1/checklists.

Ciò che è strano è che naviga in questo stato con altri mezzi aggiorna perfettamente l'URL. Ad esempio (presumendo i passaggi 1 e 2 sopra sono stati seguiti):

.
1. Scorri fino in fondo e fai clic sul collegamento Next Phase. Si noti che lo stato cambia e gli aggiornamenti URL.
2. Scorri verso il basso su questa nuova vista e fai clic su Previous Phase. Si noti che lo stato precedente ricarica e questa volta l'URL è aggiornato correttamente.

Sto usando UI-router in modo errato o facendo qualcos'altro in modo errato per causare questo comportamento?

Answer 1

Check qui Versione aggiornata

On Your State 'check-lists' fornisci UI-SREF a 'checklist-phase'

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

.

e il 'checklist-phase' è definito come uno stato figlio di 'checklist-detail'

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

.

E lo stato 'checklist-detail' ha un controller che chiama $ State.Go

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

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

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

.

Non farlo ... basta rimuovere il $state.go - perché stai già navigando su checklist-phase (vedere le prime linee sopra) ... Controlla qui