javascript - personalizado - mensaje de confirmacion jquery

Mostrando alerta en angularjs cuando el usuario abandona una página

Question

Soy una nueva abeja angularjs. Intento escribir una validación que alerta al usuario cuando intenta cerrar la ventana del navegador.

Tengo 2 enlaces en mi página v1 y v2. Al hacer clic en los enlaces lleva a las páginas específicas. Aquí está el código para redirigir a v1 y v2

angular.module(''myApp'', [''myApp.filters'', ''myApp.services'', ''myApp.directives''])

.config([''$routeProvider'', function($routeProvider) {
        $routeProvider.when(''/v1'', {templateUrl: ''pages/v_1.html'', controller: MyCtrl1});
        $routeProvider.when(''/v2'', {templateUrl: ''pages/v_2.html'', controller: MyCtrl2});
        $routeProvider.otherwise({redirectTo: ''/v1''});
}]);

Quiero mostrar un mensaje cuando el usuario hace clic en v1 que "está a punto de partir de la v1, si desea continuar" y lo mismo al hacer clic en v2. Cualquier sugerencia sobre cómo lograr esto sería apreciada.

Recibí una respuesta here pero aparece el mensaje después de cada intervalo de tiempo.

Código actualizado;

Controladores

function MyCtrl1() {
    $scope.$on(''$locationChangeStart'', function (event, next, current) {
        if (''your condition'') {
            event.preventDefault();

            MessageService.showConfirmation(
                ''Are you sure?'',
            MessageService.MessageOptions.YES_NO, {
                ''YES'': function () {
                    blockNavigation = false;
                    $location.url($location.url(next).hash());
                    $rootScope.$apply();
                },
                ''NO'': function () {
                    MessageService.clear();
                    $log.log(''NO Selected'')
                }
            });
        }
    });
}
MyCtrl1.$inject = [];


function MyCtrl2() {}
MyCtrl2.$inject = [];

Answer 1

Aquí está la directiva que uso. Se limpia automáticamente cuando se descarga el formulario. Si desea evitar que la solicitud se active (por ejemplo, porque guardó correctamente el formulario), llame a $ scope.FORMNAME. $ SetPristine (), donde FORMNAME es el nombre del formulario que desea evitar que se le solicite.

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

Answer 2

Como ha descubierto anteriormente, puede usar una combinación de window.onbeforeunload y $locationChangeStart para window.onbeforeunload $locationChangeStart mensaje al usuario. Además, puede utilizar ngForm.$dirty mensajes solo al usuario cuando haya realizado cambios.

He escrito una directiva angularjs que puede aplicar a cualquier formulario que busque automáticamente los cambios y le envíe un mensaje al usuario si vuelven a cargar la página o si se va a navegar. @see https://github.com/facultymatt/angular-unsavedChanges

¡Espero que encuentres útil esta directiva!

Answer 3

El código para el diálogo de confirmación se puede escribir más corto de esta manera:

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

Answer 4

Los otros ejemplos aquí funcionan bien para las versiones anteriores de ui-router (> = 0.3.x) pero todos los eventos de estado, como $stateChangeStart , están en desuso a partir de 1.0 . El nuevo código ui-router 1.0 usa el servicio $ transitions . Entonces necesita inyectar $transitions en su componente y luego usar el método $transitions.onBefore como lo demuestra el siguiente código.

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

Este es solo un ejemplo super simple. El servicio $transitions puede aceptar respuestas más complicadas, como promesas. Vea el tipo HookResult para más información.

Answer 5

Vamos a separar su pregunta, usted está preguntando sobre dos cosas diferentes:

1.

Intento escribir una validación que alerta al usuario cuando intenta cerrar la ventana del navegador.

2.

Quiero mostrar un mensaje cuando el usuario hace clic en v1 que "está a punto de partir de la v1, si desea continuar" y lo mismo al hacer clic en v2.

Para la primera pregunta, hazlo de esta manera:

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

Y para la segunda pregunta, hazlo de esta manera:

Debe manejar el evento $locationChangeStart para conectarse para ver el evento de transición, así que use este código para manejar la validación de transición en su controlador / 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();
        }
    });
}

Answer 6

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

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

Volver a cargar la página: usando init