AngularJS confirme avant le changement de route

Est-il possible d'écouter les changements de route ET de onwindowunload à la fois pour confirmer la page de quitter sans enregistrer les modifications?

Cas d'utilisation:

  • Utilisateur clique sur Retour
  • Utilisateur appuie sur le bouton retour dans le navigateur
  • L'utilisateur tape une URL différente

Si l'utilisateur clique sur "annuler" stop à la page /changement d'itinéraire.

J'ai vu quelques exemples différents mais aucun n'a fonctionné tout à fait raison.

source d'informationauteur amcdnl

  1. 22

    Démo: http://plnkr.co/edit/Aq8uYg

    Dans la démo, si vous modifiez la valeur de l'entrée, vous serez remarqué lorsque vous essayez de revenir en arrière.

    Écouter $locationChangeStart et l'utilisation event.preventDefault() pour annuler le changement d'emplacement si des modifications ne sont pas confirmées.

    Cette méthode a un avantage sur $route.reload(): régulateur de courant et de modèles, il ne sera pas instancié. ainsi, tous vos variables sont identiques utilisateur, cliquez sur le bouton "Retour".

  2. 12

    Vous trouverez les $locationChangeStart est un événement que vous pouvez écouter pour détecter un changement d'itinéraire.

    Essayer quelque chose comme

    $rootScope.$on('$locationChangeStart', function (event, next, current) {
  /* do some verification */
});

    $route.reload() permettra d'éviter le changement d'itinéraire.

    La distinction entre l'utilisateur a cliqué sur le dos ou la modification de l'url etc ne fera pas une différence. Comme les navigateurs ne pas recharger toute les ressources lorsque vous modifiez l'url passée la # tout est encore contenue dans votre angulaire de la logique. Cela signifie que toutes ces méthodes devraient déclencher la $locationChangeStart événement.

    @Jon a souligné que la $route service va certainement vous être utiles. le .reload() méthode permettra d'éviter le changement d'itinéraire à partir de la fin mais il ya beaucoup plus que vous pouvez faire avec le $route service si vous examinez - voir la documentation.

  3. 4

    Je voudrais simplement mettre à jour une propriété sur votre $rootScope comme hasUnsavedEdits.

    function confirmLeavePage(e) {
  var confirmed;
  if ($rootScope.hasUnsavedEdits) {
    confirmed = $window.confirm("You have unsaved edits. Do you wish to leave?");
    if (e && !confirmed) { 
      e.preventDefault();
    }
  }
}

$window.addEventListener('beforeunload', confirmLeavePage);

$rootScope.$on("$locationChangeStart", confirmLeavePage);

    Vous pourriez avoir à modifier un peu le code pour gérer à la fois les conditions. Voir démo pour plus de détails.

  4. 3

    C'est aussi joli lien
    http://weblogs.asp.net/dwahlin/cancelling-route-navigation-in-angularjs-controllers

    function init() {

    //initialize data here..
    //Make sure they're warned if they made a change but didn't save it
    //Call to $on returns a "deregistration" function that can be called to
    //remove the listener (see routeChange() for an example of using it)
    onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange);
}

function routeChange(event, newUrl) {
    //Navigate to newUrl if the form isn't dirty
    if (!$scope.editForm.$dirty) return;

    var modalOptions = {
        closeButtonText: 'Cancel',
        actionButtonText: 'Ignore Changes',
        headerText: 'Unsaved Changes',
        bodyText: 'You have unsaved changes. Leave the page?'
    };

    modalService.showModal({}, modalOptions).then(function (result) {
        if (result === 'ok') {
            onRouteChangeOff(); //Stop listening for location changes
            $location.path(newUrl); //Go to page they're interested in
        }
    });

    //prevent navigation by default since we'll handle it
    //once the user selects a dialog option
    event.preventDefault();
    return;
}
  5. 0

    J'ai créé le service qui intègre des informations fournies dans les autres réponses (CoffeeScript, voir Plunker ):

    angular.module('myModule').service 'ChangeLossPreventer', ($rootScope, $q, $state) ->

  confirmationMessage = null

  service =
    prevent: (message = 'Changed data will be lost. Continue?') ->
      confirmationMessage = message

    prompt: ->
      confirmation = if confirmationMessage then confirm(confirmationMessage) else yes
      if not confirmation
        $q.reject()
      else
        $q.when(confirmation).then ->
          service.cancel()

    cancel: ->
      confirmationMessage = null

  $rootScope.$on '$stateChangeStart', (event, newState, newStateParams) ->
    if confirmationMessage
      event.preventDefault()
      service.prompt().then ->
        $state.go(newState, newStateParams)

  window.onbeforeunload = ->
    confirmationMessage

  service

    Il est basé sur angular-ui-router (utilisation de la $state service). Lorsque votre site web entre dans l'état dans lequel les données peuvent être perdues, vous devez appeler

    ChangeLossPreventer.prevent("Optional warning message.");

    Lorsqu'il existe un état (c'est à dire l'utilisateur enregistre les données), vous devez appeler:

    ChangeLossPreventer.cancel()

    Par défaut, avertissement apparaîtra sur la modification de l'état ou de la page fermer (c'est à dire d'actualisation ou d'aller à un autre site web). Vous pouvez aussi avoir besoin de vérifier s'il est sûr d'en exécuter une autre actions (par exemple, ne se déconnecte pas avec XHR si il y a des modifications non enregistrées):

    $scope.logout = function() {
    //confirmation will pop up only if there are unsaved changes
    ChangeLossPreventer.prompt().then(function(){
       //logout after confirmation
    });
};

    J'ai créé un Plunker qu'il simule.

    1. Cliquez sur le texte sur la page d'accueil (page vous entrez "dangereux" de l'état).
    2. Essayez de cliquer sur d'autres liens ou l'actualisation de la page d'avertissement apparaît.
    3. Après "sauver" le terrain, la page des feuilles dangereuses, de l'état et tout fonctionne comme avant.
  6. 0

    Angulaire ES6 Utilisateurs

    export default class myRouteController {

  constructor($scope, $window) {
    this.$scope = $scope;
    this.$window = $window;

    this.$scope.$on('$stateChangeStart', (evt) => {
      if(this.form.$dirty && !$window.confirm('Are you sure you want to leave this page?')) {
        evt.preventDefault();
      }
    });
  }
}