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
        }]

    });