eventos - AngularJS window.onbeforeunload en un controlador se está activando en otro controlador

directivas personalizadas angularjs

Question

Aquí está mi problema, tengo dos vistas (View1 y View2) y un controlador para cada vista (Ctrl1 y Ctrl2). En View1 trato de advertir al usuario antes de que abandone la página accidentalmente sin guardar los cambios.

Estoy usando window.onbeforeunload, que funciona bien, pero mi problema es que, aunque solo he cargado previamente en un controlador, ¡el evento también parece activarse en el segundo controlador! Pero ni siquiera tengo ese evento allí. Cuando el usuario abandona una página y hay cambios no guardados, se le advierte con la descarga antes de iniciar la sesión, si el usuario descarta la alerta y abandona la página, se le regresa a la segunda vista, si el usuario intenta abandonar ahora esta otra vista, ¡También seríamos advertidos sobre cambios no guardados! Cuando ese ni siquiera es el caso! ¿Por qué está pasando esto?

También estoy usando $ locationChangeStart, que funciona bien, pero solo cuando el usuario cambia la ruta, no cuando actualiza el navegador, pulsa ''atrás'' o trata de cerrarla, es por eso que me veo obligado a usarla antes de descargarla ( Si usted es un mejor enfoque, por favor hágamelo saber). Cualquier ayuda o un mejor enfoque sería muy apreciado!

//In this controller I check for window.onbeforeunload
app.controller("Ctrl1", function ($scope, ...)){
  window.onbeforeunload = function (event) {        

    //Check if there was any change, if no changes, then simply let the user leave
    if(!$scope.form.$dirty){
      return;
    }

    var message = ''If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?'';
    if (typeof event == ''undefined'') {
      event = window.event;
    }
    if (event) {
      event.returnValue = message;
    }
    return message;
  }

  //This works only when user changes routes, not when user refreshes the browsers, goes to previous page or try to close the browser
  $scope.$on(''$locationChangeStart'', function( event ) {    
    if (!$scope.form.$dirty) return;
    var answer = confirm(''If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?'')
    if (!answer) {
      event.preventDefault();
    }
  });
}

//This other controller has no window.onbeforeunload, yet the event is triggered here too!
app.controller("Ctrl2", function ($scope, ...)){
  //Other cool stuff ...
}

Intenté verificar la ruta actual con $ location.path () para advertir al usuario solo cuando está en la vista Quiero que se active la carga antes de la descarga, pero esto parece un poco ''hacky''. controlador en absoluto.

Agregué $ location.path ()! = ''/ View1'' en el primero que parece funcionar, pero no me parece correcto, además no solo tengo dos vistas, tengo varias vistas y esto se vería afectado. Difícil con más controladores involucrados:

app.controller("Ctrl1", function ($scope, ...)){
  window.onbeforeunload = function (event) {        

    //Check if there was any change, if no changes, then simply let the user leave
    if($location.path() != ''/view1'' || !$scope.form.$dirty){
      return;
    }

    var message = ''If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?'';
    if (typeof event == ''undefined'') {
      event = window.event;
    }
    if (event) {
      event.returnValue = message;
    }
    return message;
  }

  //This works only when user changes routes, not when user refreshes the browsers, goes to previous page or try to close the browser
  $scope.$on(''$locationChangeStart'', function( event ) {    
    if (!$scope.form.$dirty) return;
    var answer = confirm(''If you leave this page you are going to lose all unsaved changes, are you sure you want to leave?'')
    if (!answer) {
      event.preventDefault();
    }
  });
}

Answer 1

Acabo de intentar la solución anterior, y eso no me funcionó. Incluso escribir manualmente delete window.onbeforeunload Antes de delete window.onbeforeunload en la consola no eliminaría la función. Necesitaba establecer la propiedad en indefinido en su lugar.

$scope.$on(''$destroy'', function(e){
  $window.onbeforeunload = undefined;
});

Answer 2

Anule el registro del evento onbeforeload cuando el controlador que lo definió se salga del alcance:

$scope.$on(''$destroy'', function() {
    delete window.onbeforeunload;
});

Answer 3

Como una actualización de esto, para cualquier persona que use angulo-ui-router, ahora pasaría $ transiciones a su controlador y uso;

$transitions.onStart({}, function ($transition)
{
    $transition.abort();
    //return false;
});

Answer 4

Para aquellos de ustedes que usan angular-ui-router usarían $stateChangeStart lugar de $locationChangeStart , por ejemplo

$scope.$on(''$stateChangeStart'', function (event){
  if (forbit){
    event.preventDefault()
  }
  else{  
    return
  {
})