javascript tutorial - Visualizzazione dell'avviso in angularjs quando l'utente lascia una pagina




watcher html (6)

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

Answers

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.


Ecco la direttiva che uso. Si ripulisce automaticamente quando il modulo viene scaricato. Se si desidera impedire l'attivazione del prompt (ad esempio perché il modulo è stato salvato correttamente), chiamare $ scope.FORMNAME. $ SetPristine (), dove FORMNAME è il nome del modulo che si desidera impedire al prompt.

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

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

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!


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

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

Ricarica pagina: usando init


In linea di principio, puoi modificarlo usando l'opzione [selezionata] come selettore, ma ciò non funziona in molti browser. Inoltre, questo ti consente solo di definire l'opzione selezionata, non l'opzione che ha il focus al passaggio del mouse.

Testato per funzionare in Chrome 9 e Firefox 3.6, non funziona in Internet Explorer 8.





javascript model-view-controller angularjs angularjs-directive