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.
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
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();
}
});
Vous devez écrire votre travail fonctionnel dans la fenêtre contextuelle du modèle. comme
Mettez des boutons de lien pour
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?
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.
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();
});
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();
});
});