Montrant alerte dans angularjs quand un utilisateur quitte la page
Je suis un angularjs abeille. Je suis en train d'écrire une validation qui alerte l'utilisateur lorsqu'il tente de fermer la fenêtre du navigateur.
J'ai 2 liens sur ma page v1 et v2.Lorsqu'il est cliqué sur les liens qu'il faut pour les pages spécifiques.
Voici le code pour rediriger vers la v1 et la v2
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/v1', {templateUrl: 'pages/v_1.html', controller: MyCtrl1});
$routeProvider.when('/v2', {templateUrl: 'pages/v_2.html', controller: MyCtrl2});
$routeProvider.otherwise({redirectTo: '/v1'});
}]);
Je veux afficher un message lorsque l'utilisateur clique sur v1 qu'il est sur le point de quitter à partir de v1, s'il veut continuer" et même en cliquant sur v2.
Tous les pointeurs sur la façon d'y parvenir serait appréciée.
J'ai obtenu une réponse ici mais il s'affiche le message après chaque intervalle de temps.
Code Mis À Jour;
Contrôleurs
function MyCtrl1() {
$scope.$on('$locationChangeStart', function (event, next, current) {
if ('your condition') {
event.preventDefault();
MessageService.showConfirmation(
'Are you sure?',
MessageService.MessageOptions.YES_NO, {
'YES': function () {
blockNavigation = false;
$location.url($location.url(next).hash());
$rootScope.$apply();
},
'NO': function () {
MessageService.clear();
$log.log('NO Selected')
}
});
}
});
}
MyCtrl1.$inject = [];
function MyCtrl2() {}
MyCtrl2.$inject = [];
- Je crois que le terme que tu voulais est "débutant". Sauf si vous êtes réellement un apis mellifera pupe.
Vous devez vous connecter pour publier un commentaire.
Le code de la boîte de dialogue de confirmation peut être écrit plus courte de cette façon:
window.onbeforeunload
.Vous permet de séparer votre question, vous parlez de deux choses différentes:
1.
2.
Pour la première question, le faire de cette façon:
Et pour la deuxième question, le faire de cette façon:
Vous devez gérer les
$locationChangeStart
événement afin de le raccorder à la vue de la transition de l'événement, il faut donc utiliser ce code pour gérer la transition de la validation de votre contrôleur/s:MyCtrl1
etMyCtrl2
contrôleurs.Ici est la directive-je utiliser. Il nettoie automatiquement d'elle-même lorsque le formulaire est déchargé. Si vous souhaitez empêcher l'invite de commandes à partir de tir (par exemple, parce que vous avez enregistré avec succès le formulaire), appelez $champ d'application.Nom du formulaire.$setPristine(), où le nom du formulaire est le nom du formulaire que vous souhaitez empêcher de demander.
$(window).bind('beforeunload', doPrompt);
plutôt quewindow.addEventListener('beforeunload', areYouSurePrompt);
(etunbind
pourremoveEventListener
) dans FF 31.0 pour quelque raison que ce soit que le natifwindow
appels n'ont pas de travail (alors quewindow.onbeforeunload = function(){ return "sure?"; }
de travail)?! Aussi de ce que je peux dire, le$locationChangeStart
n'est jamais de tir et compte tenu de l'utilisation deonbeforeunload
est ce bloc-elle vraiment nécessaire?Comme vous l'avez découvert ci-dessus, vous pouvez utiliser une combinaison de
window.onbeforeunload
et$locationChangeStart
de message à l'utilisateur. En outre, vous pouvez utiliserngForm.$dirty
à seulement message à l'utilisateur quand ils ont apporté des changements.J'ai écrit un angularjs directive que vous pouvez appliquer à toute forme qui va automatiquement à l'affût des changements et le message à l'utilisateur s'il recharge la page, ou de naviguer loin. @voir https://github.com/facultymatt/angular-unsavedChanges
Nous espérons que vous trouverez cette directive utile!
Les autres exemples ici fonctionnent bien pour les vieilles versions de l'interface utilisateur du routeur (>=0.3.x) mais de l'etat événements, tels que
$stateChangeStart
, sont obsolète depuis la 1.0. La nouvelle interface utilisateur-routeur 1.0 code utilise la $transitions de service. Si vous avez besoin d'injecter$transitions
dans votre composant, puis utiliser le $transitions.onBefore méthode que le code ci-dessous montre.C'est juste un super exemple simple. Le
$transitions
service peut accepter plus compliqué réponses telles que des promesses. Voir la HookResult type pour plus d'informations.Recharger la page: à l'aide d'init