CODEWITHSUNDEEP
angularjs
Rebam1
Rebam1

Reputation: 31

AngularJS warning when leaving page

I know there are a few posts similar to this but I simply can't get any of them to work for me as intended. I'm trying to setup an event handler to listen to a location change on a specific scope. The code looks like this:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="verifyViewChange">
    <a href="SwitchToThis.html">Test</a>
</div>

<script>
    var app = angular.module('myApp', []);

    app.controller('verifyViewChange', function ($location, $scope) {
        $scope.$on('$locationChangeStart', function (event) {
            event.preventDefault();
            alert("I'm preventing you from leaving the page");
        });
    });
</script>
</body>
</html>

When I load the page I get the warning, but not when clicking on the link. What do I need to do to make it work?

Upvotes: 0

Views: 8918

Answers (3)

Joe
Joe

Reputation: 19

The [fix above] is great just added this bit to the handleUnloadEvent...

function handleUnloadEvent(event) {
/*
This bit here theres another bind that says if this fields initial value is 
not the same as its current value add the class of input-changed if it is 
remove the class...so you can flag any page ya want to prompt a dialog based 
on presence of a class on an input.
*/
var changeCheckCount = $('.input-changed').length;
console.log('changeCheckCount',changeCheckCount);
if(changeCheckCount === 0)
{
    $scope.removeUnloadEvent();
}
else if(changeCheckCount > 0)
{
    event.returnValue = "You have Unsaved changes do you really want to leave?";
}

Allows you to say if you want dialog to reload or leave page with just a class...Suppose you could bind the dialog too by finding the first one with .input-changed and have a data attribute on it with the message to show as the dialog.

Upvotes: 0

NewDirection
NewDirection

Reputation: 114

Below is working example , it may helpful to you:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


    <div ng-app="myApp" ng-controller="verifyViewChange">
        <a href="SwitchToThis.html" ng-click="funConfirm()">Test</a>
    </div>

    <script>
        var app = angular.module('myApp', []);     
        app.controller('verifyViewChange', function ($location, $scope) {
           $scope.funConfirm = function () {
                var retVal = confirm("I'm preventing you from leaving the page");
                if (retVal == true) {

                    return false;
                } else {

                   event.preventDefault();
                    return false;

                }
            }

        });
    </script>

Upvotes: -2

Daniel Cardoso
Daniel Cardoso

Reputation: 478

You should use the native 'beforeunload' event by adding it to the window.

Below is an example:

$scope.addUnloadEvent = function(){
if (window.addEventListener) {
       window.addEventListener("beforeunload", handleUnloadEvent);
   } else {
       //For IE browsers
       window.attachEvent("onbeforeunload", handleUnloadEvent);
   }
}

function handleUnloadEvent(event) {
   event.returnValue = "Your warning text";
};

//Call this when you want to remove the event, example, if users fills necessary info
$scope.removeUnloadEvent = function(){
   if (window.removeEventListener) {
       window.removeEventListener("beforeunload", handleUnloadEvent);
   } else {
       window.detachEvent("onbeforeunload", handleUnloadEvent);
   }
}

//You could add the event when validating a form, for example
$scope.validateForm = function(){
    if($scope.yourform.$invalid){
        $scope.addUnloadEvent();
        return;
    }
    else{
        $scope.removeUnloadEvent();
    }

}

Upvotes: 2

Related Questions