I have a problem. I have a registry form and many other forms. Now I want to check whether the form is dirty and then I bring a confirm box if they really want to leave/close this page.
First of all, when I go back with the browser's back button and not with my other button ([button..] just 4 example) the confirmation box shows up two times and after two times confirming I'm still on the same page, just the form is resetted. When I press my own everything works fine.
Secondly, when I close the browser, my confirmation box shows up and afterwards the browsers confirmation box also shows up, but I only want one of them.

$scope.$on('$locationChangeStart', function (event, next, current) {
    if ($scope.requestForm.$dirty) {
        if (!$window.confirm('Unsaved Changes, leave Page?')) {
            //cancel leaving view2
            //works when clicking links, but doesn't work when using the back button
            event.preventDefault();
        }
    } else {

    }
});

$scope.$watch("requestForm.$dirty", function (newval) {
    window.myGlobalDirtyFlag = newval;
});

window.onbeforeunload = function (e) {
    if (window.myGlobalDirtyFlag === true) {
        if (!$window.confirm('Unsaved Changes, close Page?')) {
            //cancel leaving view2
            //works when clicking links, but doesn't work when using the back button
            return false;
        } else {

        }
    }
};

$scope.$on("$destroy", function () {
    window.myGlobalDirtyFlag = false;
});

May someone also have an idea how I bring this into an AngularJS directive, so I don't have to copy this code for every site where I have a form on it. (Every page only has 1 form, but every form name is different!)
My controllers are in seperate javascript files, (function blablaController() {}) and I pass this per routeProvider in my config file (templateUrl: blabla.html, controller: blabalController)

Regards,
Anthrax

I have a problem. I have a registry form and many other forms. Now I want to check whether the form is dirty and then I bring a confirm box if they really want to leave/close this page.
First of all, when I go back with the browser's back button and not with my other button ([button..] just 4 example) the confirmation box shows up two times and after two times confirming I'm still on the same page, just the form is resetted. When I press my own everything works fine.
Secondly, when I close the browser, my confirmation box shows up and afterwards the browsers confirmation box also shows up, but I only want one of them.

$scope.$on('$locationChangeStart', function (event, next, current) {
    if ($scope.requestForm.$dirty) {
        if (!$window.confirm('Unsaved Changes, leave Page?')) {
            //cancel leaving view2
            //works when clicking links, but doesn't work when using the back button
            event.preventDefault();
        }
    } else {

    }
});

$scope.$watch("requestForm.$dirty", function (newval) {
    window.myGlobalDirtyFlag = newval;
});

window.onbeforeunload = function (e) {
    if (window.myGlobalDirtyFlag === true) {
        if (!$window.confirm('Unsaved Changes, close Page?')) {
            //cancel leaving view2
            //works when clicking links, but doesn't work when using the back button
            return false;
        } else {

        }
    }
};

$scope.$on("$destroy", function () {
    window.myGlobalDirtyFlag = false;
});

May someone also have an idea how I bring this into an AngularJS directive, so I don't have to copy this code for every site where I have a form on it. (Every page only has 1 form, but every form name is different!)
My controllers are in seperate javascript files, (function blablaController() {}) and I pass this per routeProvider in my config file (templateUrl: blabla.html, controller: blabalController)

Regards,
Anthrax

• javascript
• jquery
• angularjs
• angularjs-directive

• why not add it to the root scope? – lucuma Commented Oct 15, 2013 at 15:25
• Well, I have to say, I'm not very good in working with rootScope and directives without an example.. :/ I thought about getting the form like "var form = $('button[type=submit]').closest("form");" or something, and add this parameter to make it work for every form.. – Anthrax Commented Oct 15, 2013 at 15:27

1 Answer 1

Here is a service and directive that answers your question. Probably the only change you might consider making to it is using $window instead of window inside the service. As the instructions state, you'll just add the attribute unsaved-changes-warning to your form.

https://github./facultymatt/angular-unsavedChanges