stateChangeStart che si attiva più volte

Question

Sto tentando di utilizzare $stateChangeStart con il router ui in un controller. Sembra che ogni volta che viene sparato, il callback spara +1 volte di più rispetto all'ultima volta.

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
    console.log('$stateChangeStart'); 
}); 

Ad esempio, al primo cambio console.log verrà generato una volta. la seconda volta console.log verrà licenziato due volte, ecc.

So che usare event.preventDefault() interromperà questo comportamento, ma fermerà anche tutti i comportamenti e questa non è una soluzione realistica per me.

Io ho una soluzione, anche se mi sento come se ci potrebbe essere un modo più intelligente per gestire questo:

var stateChangeStarted = false; 
$rootScope.$on('$stateChangeStart', function(event){ 
    if(!stateChangeStarted) { 
     stateChangeStarted = true; 
     console.log('$stateChangeStart'); 
    } 
}); 

Qualcuno ha qualche idea del perché questo sta accadendo e che cosa posso fare per evitare questo?

Answer 1

Il controller viene istanziato dall'interfaccia utente ogni volta che si accede allo stato a cui è associato. Pertanto, la tua chiamata $rootScope.$on aggiungerà un nuovo listener all'evento $stateChangeStart ogni volta che si accede a tale stato.

Se è necessario gestire l'evento una sola volta per istanza del controllore, è possibile salvare la funzione di annullamento della registrazione che $rootScope.$on restituisce ed eseguirla dall'interno del callback del listener.

var deregisterStateChangeStart = $rootScope.$on('$stateChangeStart', function (event) { 
    // Do something here. 

    deregisterStateChangeStart(); 
}); 

Answer 2

Cancellare gli ascoltatori per stateChangeStart all'inizio del controller.

$rootScope.$$listeners.$stateChangeStart = [];