web-dev-qa-db-fra.com

Dans AngularJS, comment détecter le moment où l'utilisateur quitte le modèle/la page?

J'utilise la commande Javascript: setInterval. J'aime bien l'arrêter lorsque l'utilisateur quitte la page.

Ce code semble bien fonctionner: http://jsfiddle.net/PQz5k/

Il détecte quand un utilisateur quitte une page. Il exécute le code Javascript lorsqu'un utilisateur clique sur un lien pour accéder à une page HTML ou à une URL différente, ou s'il recharge la page.

Cependant, cela ne fonctionne pas lorsque je passe d’un modèle AngularJS à un autre. Par exemple, si je suis à template1.html, je veux que le code Javascript fasse quelque chose dans Controller1.js lorsque l'utilisateur quitte template1.html pour aller à template2.html. Quel est l'équivalent de ce code ci-dessous dans AngularJS ?:

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

Je pense que vous avez deux contrôleurs, un pour chaque modèle comme ceci:

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

Eh bien, lorsque vous passez d'un modèle à un autre, un événement appelé $ destroy, vous pouvez le lire ici http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Supposons que je passe du modèle avec Controller_1 au modèle avec Controller_2. Controller_1 a un intervalle que j'aimerais arrêter. Vous pouvez accomplir ceci avec:

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

Cela signifie que lorsque $ scope pour Controller_1 est détruit, l'événement est appelé et l'intervalle est effacé.

134
Mathew Berg

C’est le cas lorsque vous laissez un modèle (demandez également une boîte de dialogue de confirmation):

             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);
                        }
                    }
                });
               }
11
JoMendez

si vous utilisez ui-router, vous pouvez utiliser la propriété 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
        }]

    });
6
Pranay Dutta

Vous pouvez utiliser un observateur pour vérifier le moment où le chemin d’emplacement est modifié, par exemple:

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

Ensuite, vous pouvez obtenir l’ancien emplacement et le nouvel emplacement et exécuter une fonction ou ce que vous voulez,

0
Luis Saraza