2015-01-05 14 views
29

Il mio utente può lasciare uno stato ma prima voglio mostrare una finestra di dialogo modale "Vuoi salvare?"

SOLO se i dati dell'utente sono sporchi significa che è cambiato.

Quello che NON voglio è attaccare una proprietà isDirty nel mio EditController al $ rootScope andare all'evento stateChangeStart e controllare lì isDirty e quindi mostrare/non salvare la finestra di dialogo.

Prevenire le variabili globali dice ogni principiante libro javascript ...

1.) Qual è allora il modo pro per evitare un cambiamento di stato, senza hacking del $ rootscope ?.

2.) Esistono librerie di supporto per ui-router che migliorano i ganci della funzione di offerta del router-UI all'interno del controller per incapsulare la logica ui?

risposta

50

(1) Secondo i docs sotto Stato Eventi di modifica

$rootScope.$on('$stateChangeStart', 
     function(event, toState, toParams, fromState, fromParams){ 
      event.preventDefault(); 
      // transitionTo() promise will be rejected with 
      // a 'transition prevented' error 
}) 

Si potrebbe cambiare $ rootScope a $ portata laddove opportuno e lavora.

Sotto Allegare dati personalizzati a oggetti stato, è possibile trasmettere dati personalizzati.

(2) Non sono sicuro di cosa stai chiedendo, ma le fabbriche/i servizi/i fornitori sarebbero davvero utili.

+1

divertente che non ho pensato al $ ambito locale comune vedere sempre tutti i campioni utilizzando $ rootScope, forse un cattivo esempio ... il vostro suggerimento (1) ha funzionato! – Elisabeth

+1

Mi sono anche reso conto che devo differenziare l'esecuzione logica nel $ rootState "stateChangeStart" solo quando è attivato un certo "ToState" (perché non voglio chiedere in nessun $ scope.on ("stateChangeStart) per un certo "ToState") e la logica viene eseguita quando uno stato inizia a cambiare e ora leggo ora l'ambito $ locale per gestire correttamente isDirty. – Elisabeth

+1

Come riprendi l'evento? Dire che voglio fare operazioni xyz e quindi riprendere l'evento e andare allo stato desiderato – molerat

2

Sebbene al momento della scrittura non faccia parte della versione stabile, la versione 1.0 del router UI utilizzerà il valore restituito di onEnter/onExit per impedire la navigazione.

Vedi GitHub issue 2219

+1

'$ scope.pn (" $ stateChangeStart ")' funziona ancora con 1.0-alpha/beta quando fa riferimento al file 'stateEvents.js' incluso e richiede' ui.router.state.events' nei moduli dell'app. – Jensen

8

Utilizzando $ transitions.onStart (angolare-ui-router 1.0.0-rc) è possibile restituire un valore booleano. Se false la transizione verrà annullata.

$transitions.onStart({}, function (trans) { 
    var answer = confirm("Want to leave this page?") 
    if (!answer) { 
     return false; 
    } 
}); 

Ecco la documentazione: https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

+1

Funziona, ma sto ricevendo errore nella console 'TransitionRejection (type: 3, message: La transizione è stata interrotta, dettaglio: Hook transizione abortita)' – elnino3800

Problemi correlati