AngularJS Ui-Route Ausfahrt Seite

Question

Ich brauche eine Möglichkeit, den Benutzer zu fragen, ob er/sie eine Seite verlässt. Ich habe gelesen, dass dies eine Möglichkeit wäre, aber das Ereignis wird ausgelöst, wenn ich die Seite betrete und nicht, wenn ich die Seite verlasse. onExit würde funktionieren, aber dieses Ereignis muss ich an der ... .routes.js definiert und ich brauche Zugriff auf Eigenschaften und Funktionen auf der Steuerung. Gibt es ein Ereignis, das beim Beenden der Seite ausgelöst wird?

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

Answer 1

Dies auf vielfältige Weise erreicht werden könnte,

1- Verwenden $ locationChangeStart Technik und überprüfen, ob diese vor der Anzeige Nachricht aktuelle Standort ist. Beispiel unten

$scope.$on('$locationChangeStart', function(event, next, current) { 
    // match Current URL and If it true show message. 
    if (current.match("\/yourCurrentRoute")) { 
      var answer = confirm("Are you sure you want to leave this page?"); 
      if (!answer) { 
       event.preventDefault(); 
      }else { 
       //Do whatever else you want to do 
      } 
    } 
}); 

2- Falls Sie Ui-Router verwenden, es hat onExit Rückruf-Option, Beispiel unten

$stateProvider.state("contacts", { 
      template: "<h1>{{title}}</h1>", 
      resolve: { title: 'My Contacts' }, 
      controller: function($scope, title){ 
        $scope.title = title; 
      }, 
      onExit: function(title){ 
       if(title){ ... do something ... } 
      } 
    }) 

3 - gibt es eine nicht-Winkel Art und Weise, es zu tun auch.

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; 
} 

4 - Verwenden Sie diese Anweisung, wenn diese Seite ein Formular enthält. Sie wird automatisch bereinigt, wenn das Formular entladen wird. Wenn Sie verhindern möchten, dass die Eingabeaufforderung ausgelöst wird (z. B. weil Sie das Formular erfolgreich gespeichert haben), rufen Sie $ scope.FORMNAME auf. $ SetPristine(), wobei FORMNAME der Name des Formulars ist, das Sie verhindern möchten.

.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(); 
       } 
      }); 
     } 
    }; 
}]); 

5- es gibt eine andere Möglichkeit, $ destroy zu verwenden, es wird gefeuert, wenn der Controller zerstört wird, schreibe es in den Controller.

$scope.$on('$destroy', function() { 
    // display error message 
}); 

Answer 2

Sie können entweder $stateChangeStart oder $stateChangeSuccess Ereignisse in der ui-Route.

// fire when the state is started to change 
$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams, options){ 
    // event.preventDefault(); // block transition from happening 
}); 

// fire when the transition completed (onExit) 
$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ 
    // do something 
    if(someCondition){ 
     $state.go(fromState); // get back to the state 
    } 
}) 

Answer 3

Die $ stateChangeStart Sie ist für Ihre Bedürfnisse gut erwähnt: in der Tat aus ui-router documentation:

$ stateChangeStart - ausgelöst, wenn der Übergang beginnt.

das ist, wenn Benutzer den vorherigen Zustand verlässt.

Hier können Sie eine Antwort auf eine ganz ähnliche Frage finden:

Can I stop the transition to the next state in an onExit?

und ther ist auch ein Arbeits Schnipsel.