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

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

Ce code semble fonctionner bien: 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 autre page ou URL HTML, ou si la page de rechargement des utilisateurs.

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

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

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

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

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

Disons que je passe du modèle avec Controller_1 au modèle avec Controller_2. Controller_1 a un intervalle que je voudrais 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 la portée $ pour Controller_1 est détruite, l'événement sera appelé et l'intervalle sera effacé.

C'est pour quand vous quittez un modèle (indiquez é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); } } }); }

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

Vous pouvez utiliser un observateur pour vérifier quand le chemin d'accès est modifié, quelque chose comme ceci:

 $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 tout ce que vous voulez,