Zwykły JavaScript ma window.onbeforeunload. Jak emulować to samo w AngularJS przy użyciu tras HTML5?Równoważność window.onbeforeunload w AngularJS dla tras
Jest $ beforeRouteChange, ale nie pozwala na anulowanie zdarzenia, o ile wiem.
Aby wyjaśnić: window.onbeforeunload będzie działać do nawigacji od strony, ale nie do nawigacji wewnątrz strony, np. przechodzenie z jednego kontrolera do drugiego za pośrednictwem interfejsu API historii HTML5.
Istnieje zdarzenie $locationChangeStart, które można anulować.
Ponieważ nie zostało to jeszcze udokumentowane, tutaj jest test jednostki opisujący, w jaki sposób wpływa on na usługę $route. https://github.com/angular/angular.js/blob/v1.0.1/test/ng/routeSpec.js#L63
Nie zapewnia to potwierdzenia dla użytkownika takiego jak window.onbeforeunload. Musisz przynieść własną usługę dialogową i zrestartować proces zmiany lokalizacji, aby uzyskać ten sam efekt (lub możesz po prostu użyć synchronicznego $window.confirm).
Dodaj to:
$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();
}
});
Dla routera kątowego '$ stateChangeStart' powinien posługiwać się. I nie obsługuje odświeżania stron, ponieważ jest obsługiwane w przypadku 'window.onbeforeunload' –
Musiałem posłuchać' $ stateChangeStart' na '$ rootScope' zamiast' $ scope', aby to działało. Zauważ, że jeśli to zrobisz, będziesz musiał ręcznie wyrejestrować ten detektor zdarzeń, gdy twój obecny zakres zostanie zniszczony ('$ scope. $ On ('$ destroy, ...)'). –
Jeśli używasz kątową-UI-router, trzeba użyć $stateChangeStart zamiast $locationChangeStart.
Całkowicie prawda! Użycie '$ locationChangeStart' z rytmem-ui-routery jest wywoływane, gdy kontroler jest" uruchomiony ", a nie kiedy użytkownik opuszcza stronę. –
Podczas korzystania z UI-Router wersja 1.0.0+, użyj $transitions.onStart zamiast $stateChangeStart. Zobacz dokumentację transition hooks.
Zdarzenia $stateChange* są przestarzałe od wersji 1.0.0 (source):
Wszystkie wydarzenia państwowe (tj
$stateChange*i przyjaciele) są obecnie nieaktualne i domyślnie wyłączona. Zamiast słuchać zdarzeń, użyj interfejsu API przechwytywania .
przykład kod przerwania przejście (source)
$transitions.onStart({}, function(transition) {
if (transition.to().name === 'unreachable') {
return false;
}
}
działa dla 'tylnej button'? – Freewind
@Freewind jest check-in 1 maja 2013, aby działało z powrotem przycisku: https://github.com/angular/angular.js/commit/dc9a580617a838b63cbf5feae362b6f9cf5ed986 – Nils