Affichage de l'alerte dans angularjs lorsque l'utilisateur quitte une page

permet de séparer votre question, vous posez deux questions différentes:

1.

j'essaie d'écrire une validation qui alerte l'utilisateur quand il essaie pour fermer la fenêtre du navigateur.

2.

je veux faire apparaître un message quand l'utilisateur clique sur v1 qu'il est sur partir de v1, s'il souhaite continuer" et même en cliquant sur v2.

pour la première question, faites-le de cette façon:

window.onbeforeunload = function (event) {
  var message = 'Sure you want to leave?';
  if (typeof event == 'undefined') {
    event = window.event;
  }
  if (event) {
    event.returnValue = message;
  }
  return message;
}

et pour la deuxième question, faites - le de cette façon:

vous devez gérer l'événement $locationChangeStart afin de vous connecter pour voir l'événement de transition, utilisez donc ce code pour gérer la validation de transition dans votre controller/ s:

function MyCtrl1($scope) {
    $scope.$on('$locationChangeStart', function(event) {
        var answer = confirm("Are you sure you want to leave this page?")
        if (!answer) {
            event.preventDefault();
        }
    });
}

Voici la directive que j'utilise. Il se nettoie automatiquement lorsque le formulaire est déchargé. Si vous voulez empêcher l'invite de s'allumer (par exemple parce que vous avez réussi à sauvegarder le formulaire), appelez $scope.FORMNAME.$setPristine (), où FORMNAME est le nom du formulaire que vous voulez empêcher de lancer.

.directive('dirtyTracking', [function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            function isDirty() {
                var formObj = $scope[$element.attr('name')];
                return formObj && formObj.$pristine === false;
            }

            function areYouSurePrompt() {
                if (isDirty()) {
                    return 'You have unsaved changes. Are you sure you want to leave this page?';
                }
            }

            window.addEventListener('beforeunload', areYouSurePrompt);

            $element.bind("$destroy", function () {
                window.removeEventListener('beforeunload', areYouSurePrompt);
            });

            $scope.$on('$locationChangeStart', function (event) {
                var prompt = areYouSurePrompt();
                if (!event.defaultPrevented && prompt && !confirm(prompt)) {
                    event.preventDefault();
                }
            });
        }
    };
}]);

Comme vous l'avez découvert ci-dessus, vous pouvez utiliser une combinaison de window.onbeforeunload et $locationChangeStart message à l'utilisateur. En outre, vous pouvez utiliser ngForm.$dirty pour envoyer un message à l'utilisateur seulement quand ils ont fait des changements.

j'ai écrit une directive angularjs que vous pouvez appliquer à n'importe quel formulaire qui guette automatiquement les changements et le message de l'utilisateur s'ils rechargent la page ou 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 anciennes versions de ui-router (>=0.3.x) mais tous les événements d'état, tels que $stateChangeStart , sont dépréciés à partir de 1.0 . Le nouveau code ui-router 1.0 utilise le $transitions service . Vous devez donc injecter $transitions dans votre component puis utiliser les transitions $.avant la méthode comme le code ci-dessous le démontre.

$transitions.onBefore({}, function(transition) {
  return confirm("Are you sure you want to leave this page?");
});

C'est juste un super exemple simple. Le service $transitions peut accepter des réponses plus compliquées telles que des promesses. Voir le de type HookResult pour plus d'informations.

$scope.rtGo = function(){
            $window.sessionStorage.removeItem('message');
            $window.sessionStorage.removeItem('status');
        }

$scope.init = function () {
            $window.sessionStorage.removeItem('message');
            $window.sessionStorage.removeItem('status');
        };

Recharger la page: à l'aide d'init