web-dev-qa-db-fra.com

Comment détecter si un utilisateur clique sur le bouton Précédent du navigateur dans Angularjs

J'ai une page de type formulaire avec des données. Et souhaitez afficher une fenêtre contextuelle/alerte lorsqu'un utilisateur clique sur le bouton retour du navigateur, demandant "s'il souhaite revenir ou rester sur la même page". J'utilise le $stateProvider d'angular-ui-router et je ne souhaite le lier qu'à un seul état/vue.

angularjsangular-ui-router
16
linyuanxie

Ceci est ma réponse précédente pour une autre question, mais il devrait être bon de vous aider 

Vous pouvez le faire en utilisant $routeChangeStart angulaire 

$ routeChangeStart

Diffusé avant un changement d'itinéraire. À ce stade, les services de route commencent à résoudre toutes les dépendances nécessaires au changement de route. En règle générale, cela implique d'extraire le modèle de vue ainsi que toutes les dépendances définies dans la propriété de résolution du routage. Une fois que toutes les dépendances sont résolues, $ routeChangeSuccess est déclenché.

Le changement de route (et le changement $location qui l'a déclenché) peut être empêché en appelant la méthode preventDefault de l'événement. Voir $rootScope.Scope pour plus de détails sur l'objet événement.

Alors s'il vous plaît essayez ce code ci-dessous. 

  $scope.$on('$routeChangeStart', function (scope, next, current) {
        if (next.$$route.controller != "Your Controller Name") {
            // Show here for your model, and do what you need**
            $("#yourModel").show();
        }
    });

Mettre à jour:

Vous devez écrire votre travail fonctionnel dans la fenêtre contextuelle du modèle. comme 

Mettez des boutons de lien pour

  • Êtes-vous sûr d'aller à la page précédente?
  • voulez-vous rester la page actuelle?
  • Voulez-vous vous déconnecter? etc. 

puis Ajouter un événement ng-click pour la page précédente, rester la page actuelle en utilisant return false, etc. 

FAIT UN SENS DUDE?

18
Ramesh Rajendran

Vous feriez mieux d'utiliser $ stateChangeStart event avec un routeur UI angulaire. Il y aura des problèmes avec $ routeChangeStart car l'événement $ routeChangeStart sera déclenché lorsque l'URL sera modifiée.

Par exemple:

Vous avez 4 états, chacun avec 2 sous-états, et chaque sous/état ou état n'est pas associé à une URL. Dans de tels cas, écouter $ routeChangeStart pourrait ne pas fonctionner.

Dans le contrôleur/la vue où vous souhaitez inviter l'utilisateur à confirmer la redirection, procédez comme suit.

Ceci sera appelé lorsque l'état changera dans votre portée actuelle (qui est la vue/le contrôleur dans lequel vous vous trouvez)

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    //Open the modal
    $('my-modal').show();
});
7
SLearner

Voici ma solution

app.run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeSuccess', function() {
        if($rootScope.previousLocation == $location.path()) {
            console.log("Back Button Pressed");
        }
        $rootScope.previousLocation = $rootScope.actualLocation;
        $rootScope.actualLocation = $location.path();
    });
});
0
syraz37