Aquí está mi problema, tengo dos vistas (View1 y View2) y un controlador para cada vista (Ctrl1 y Ctrl2). En View1 estoy tratando 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 usado onbeforeunload en un controlador, ¡el evento parece activarse también en el segundo controlador! Pero ni siquiera tengo ese evento allí. Cuando el usuario abandona una página y hay cambios no guardados, el onbeforeunload le advierte que, si el usuario descarta la alerta y abandona la página, ¿vuelve a la segunda vista? Si el usuario intenta abandonar ahora esta otra vista, ¡también nos advertirán 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 actualizan el navegador, presionan 'atrás' o intentan cerrarlo, por eso me veo obligado a usar onbeforeunload ( Si tiene un mejor enfoque, 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 () solo para advertir al usuario cuando está en la vista que quiero que se active onbeforeunload, pero esto parece un poco 'hacky', la solución sería no ejecutar onbeforeunload en el otro controlador en absoluto.

Agregué $ location.path ()! = '/ View1' en el primero, que parece funcionar, pero no me parece correcto, además de que no solo tengo dos vistas, tengo varias vistas y esto sería complicado 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();
    }
  });
}