Equivalencia de window.onbeforeload en AngularJS para las rutas

Question

El JavaScript regular tiene window.onbeforeload. ¿Cómo emulo lo mismo en AngularJS con rutas HTML5?

Hay $ beforeRouteChange, pero no le permite cancelar el evento por lo que yo sé.

Para aclarar: window.onbeforeunload funcionaría para la navegación fuera de la página, pero no para la navegación dentro de la página, p. pasando de un controlador a otro solo a través de la API de historial de HTML5.

Answer 1

Hay un evento $locationChangeStart que se puede cancelar.

Dado que aún no se ha documentado, aquí está la prueba de la unidad que describe cómo afecta el servicio $route. https://github.com/angular/angular.js/blob/v1.0.1/test/ng/routeSpec.js#L63

Esto no proporciona una confirmación para el usuario como window.onbeforeunload. Debe traer su propio servicio de diálogo y reiniciar el proceso de cambio de ubicación para obtener el mismo efecto (o puede simplemente usar el $window.confirm sincrónico).

Answer 2

Añadir este:

$scope.$on('$destroy', function() { 
    window.onbeforeunload = undefined; 
}); 
$scope.$on('$locationChangeStart', function(event, next, current) { 
    if(!confirm("Are you sure you want to leave this page?")) { 
     event.preventDefault(); 
    } 
}); 

Answer 3

Si está utilizando angular-ui-enrutador es necesario utilizar $stateChangeStart en lugar de $locationChangeStart.

Answer 4

Cuando se utiliza la interfaz de usuario -Router versión 1.0.0+, utilice $transitions.onStart en lugar de $stateChangeStart. Consulte la documentación transition hooks.

Los $stateChange* eventos están en desuso partir de la versión 1.0.0 (source):

Todos los eventos estatales, (es decir $stateChange* y amigos) ahora están en desuso y desactivado por defecto. En lugar de escuchar eventos, use la API de Transition Hook.

Código de ejemplo para abortar una transición (source):

$transitions.onStart({}, function(transition) { 
    if (transition.to().name === 'unreachable') { 
    return false; 
    } 
}