javascript - personalizadas - ng-view

En AngularJS, ¿cómo detectar cuándo el usuario abandona la plantilla/página?

Question

Estoy usando el comando Javascript: setInterval. Me gusta detenerlo cuando el usuario abandona la página.

Este código parece funcionar bien: http://jsfiddle.net/PQz5k/

Detecta cuando un usuario deja una página. Ejecuta código JavaScript cuando un usuario hace clic en un enlace para ir a una página HTML o URL diferente, o si el usuario vuelve a cargar la página.

Sin embargo, no funciona cuando voy de una plantilla AngularJS a otra. Como ejemplo, si estoy en template1.html, quiero que el código JavaScript haga algo en Controller1.js cuando el usuario abandona template1.html para ir a template2.html. ¿Cuál es el equivalente de este código a continuación en AngularJS ?:

$(window).on(''beforeunload'', function() {
return ''Your own message goes here...'';
});​

Answer 1

Creo que tienes dos controladores, uno para cada plantilla como esta:

function Controller_1($scope...){
...
}
function Controller_2($scope...){
...
}

Bueno, cuando cambias de una plantilla a otra hay un evento que se llama $ destroy, puedes leerlo aquí http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Digamos que estoy cambiando de la plantilla con Controller_1 a la plantilla con Controller_2. Controller_1 tiene un intervalo que me gustaría detener. Puedes lograr esto con:

function Controller_1($scope, $interval...){
var myInterval = $interval(...);
$scope.$on("$destroy", function(){
$interval.cancel(myInterval);
});
}

Esto significa que cuando se destruya $ scope for Controller_1, se llamará al evento y se borrará el intervalo.

Answer 2

Esto es para cuando deja una plantilla (también solicita un diálogo de confirmación):

 function Controller_1($scope...){
var myInterval = setInterval(...);
$scope.$on(''$locationChangeStart'', function (event, next, current) {
console.log(current);
if (current.match("//yourCurrentRoute")) {
var answer = confirm("Are you sure you want to leave this page?");
if (!answer) {
event.preventDefault();
}else{
clearInterval(myInterval);
}
}
});
}

Answer 3

Puede usar un observador para verificar cuándo se cambia la ruta de ubicación, algo como esto:

$scope.$watch(function(){
return $location.path();
}, function(newPath, oldPath){
//...Do something
})

Luego, puedes obtener la ubicación anterior y la nueva ubicación y ejecutar una función o lo que quieras,

Answer 4

si está usando ui-router, puede usar la propiedad onExit

 $stateProvider.state(''foo'', {
url: ''/foo'',
templateUrl: ''views/foo.html'',
controller: ''fooController'',
onExit: [''$fooService'', function($fooService) => {
$fooService.hide();//do what u want to do here
}]
});