javascript - watcher - html angular 1



Visualizzazione dell'avviso in angularjs quando l'utente lascia una pagina (4)

Sono un'angularjs nuova ape. Sto provando a scrivere una convalida che avvisa l'utente quando tenta di chiudere la finestra del browser.

Ho 2 collegamenti sulla mia pagina v1 e v2. Quando ho fatto clic sui collegamenti necessari per le pagine specifiche. Ecco il codice per reindirizzare a v1 e 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'});
}]);

Voglio far apparire un messaggio quando l'utente fa clic su v1 che "sta per partire da v1, se desidera continuare" e lo stesso facendo clic su v2. Qualsiasi suggerimento su come ottenere questo sarebbe apprezzato.

Ho una risposta here ma viene visualizzato il messaggio dopo ogni intervallo di tempo.

Codice aggiornato;

Controller

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 = [];

https://code.i-harness.com


Come hai scoperto sopra, puoi utilizzare una combinazione di window.onbeforeunload e $locationChangeStart per window.onbeforeunload $locationChangeStart messaggio all'utente. Inoltre, è possibile utilizzare ngForm.$dirty per ngForm.$dirty messaggio all'utente solo quando hanno apportato le modifiche.

Ho scritto una direttiva angularjs che puoi applicare a qualsiasi modulo che guarderà automaticamente le modifiche e invierà un messaggio all'utente se ricaricano la pagina o se ne vanno. @see https://github.com/facultymatt/angular-unsavedChanges

Spero che trovi utile questa direttiva!


Consente di separare la tua domanda, stai chiedendo due cose diverse:

1.

Sto provando a scrivere una convalida che avvisa l'utente quando tenta di chiudere la finestra del browser.

2.

Voglio far apparire un messaggio quando l'utente fa clic su v1 che "sta per partire da v1, se desidera continuare" e lo stesso facendo clic su v2.

Per la prima domanda, fallo in questo modo:

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

E per la seconda domanda, fallo in questo modo:

Dovresti gestire l'evento $locationChangeStart per collegarti per visualizzare l'evento di transizione, quindi utilizza questo codice per gestire la convalida della transizione nel / i tuo / i controller / i:

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

Gli altri esempi qui funzionano bene per le vecchie versioni di ui-router (> = 0.3.x) ma tutti gli eventi di stato, come $stateChangeStart , sono deprecati a partire da 1.0 . Il nuovo codice ui-router 1.0 utilizza il servizio $ transitions . Quindi è necessario iniettare $transitions nel componente, quindi utilizzare il metodo $transitions.onBefore come illustrato nel seguente codice.

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

Questo è solo un esempio molto semplice. Il servizio $transitions può accettare risposte più complicate come le promesse. Vedi il tipo HookResult per maggiori informazioni.


Il codice per il dialogo di conferma può essere scritto più breve in questo modo:

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




angularjs-directive