uirouter - ui router angularjs tutorial

¿Cómo ser informado de las cancelaciones de cambio de estado en el ui-router?

Question

Así que estoy usando el enrutador UI en mi aplicación y estoy usando el escucha $stateChangeStart para mostrar un cargador y el $stateChangeSuccess para luego ocultar el cargador. De esta manera tengo un cargador entre las transiciones de estado.

$rootScope.$on(''$stateChangeStart'',
                function (event, toState, toParams, fromState, fromParams) {
///show loader
});

$rootScope.$on(''$stateChangeSuccess'',
                function (event, toState, toParams, fromState, fromParams) {
//hide loader
});

Problema:

1. Estoy en el estado A
2. Hago clic en un botón para ir al estado B, $stateChangeStart se llama para B, se muestra mi cargador.
3. Inmediatamente hago clic en otro botón para ir al estado A (B tiene algunas cosas que resolver , por lo que hay tiempo antes de que la IU de B realmente comience a cargarse)
4. B no está cargado, y $stateChangeSuccess no se llama y mi cargador nunca está oculto (dado que ya estábamos en A, no se recarga)

Entonces, ¿hay alguna manera de escuchar las cancelaciones de cambio de estado y ocultar mi cargador?

Actualización: Creé un Plunk . En la carrera, he dado un tiempo de espera de 10 segundos en la resolución de B. Por lo tanto, antes de que se resuelva, haga clic en A. Supervise la consola para ver los eventos de escucha de cambio de estado.

Actualice el 25 de julio de 2015 que utiliza el enrutador AngularUI más reciente: Creado nuevo Plunk .

Answer 1

La única solución sostenible que he encontrado hasta ahora era evitar el uso de ui-sref . $state.go valor de retorno de $state.go que es clave en este caso.

El truco es manejar la promesa de transition devuelta por $state.go

$scope.safeGo = function(stateName){
  var transition = $state.go(stateName);
  transition.then(function(currentState){
    console.log(''Transition finished successfully. State is '' + currentState.name);
  })
  .catch(function(err){
    //revert your loader animation here
    console.log(''Transition failed. State is '' + $state.current.name, err);
  })
}

Se puede acceder al mismo objeto a través $state.transition propiedad $state.transition sin embargo, entre las transiciones, la propiedad es null y en cualquiera de los eventos que $state difunde, también es null . Por lo tanto, la única opción sólida es obtener el valor de retorno de $state.go .

Cuando se selecciona el estado A antes de que B se haya resuelto, la promesa de transition para B rechazará con un motivo Error: transition superseded . Sin embargo, aún tendrá que esperar hasta que B.resolve esté completo. Si desea evitar eso, deberá realizar un seguimiento de sus estados por su cuenta, ya que la transición a A se resolverá inmediatamente (porque el estado actual sigue siendo A mientras B intenta resolver).

Plunker actualizado