Angularjs $locationChangeStart doesn't trigger

Question

I'm trying to prevent user to leave a form if he changed something in it in Angular. I've read some articles about this and found $locationChangeStart. The problem is that this method doesn't get triggered after I modify something in the form and then navigate to other page. Only the window.onbeforeunload is called.

Here is the directive:

.directive(
            'confirmOnExit',
            function() {
                return {
                    link : function($scope, elem, attrs) {
                        $scope
                                .$on(
                                        '$locationChangeStart',
                                        function(event, next, current) {
                                            if ($scope.addEventForm.$dirty) {
                                                if (!confirm("The form is dirty, do you want to stay on the page?")) {
                                                    event.preventDefault();
                                                }
                                            }
                                        });
                        window.onbeforeunload = function() {
                            if ($scope.addEventForm.$dirty) {
                                return "You have unsaved information!";
                            }
                        };
                    }
                };

Here is the form:

<form name="addEventForm"
            method="POST" ng-controller="formController" confirm-on-exit>
...

</form>

Where i am wrong?

A fiddle or plunkr to play with would be great, I'm comparing with my code, in my case I ahve this in the controller and working fine, another thing to try, insteaad of scope, use $rootScope — Braulio, Jul 14 '14 at 10:47
make sure you don't miss the closing parenthesis after at the end. — Shimon Brandsdorfer, Sep 08 '15 at 19:49

score -1 · Answer 1 · edited May 23 '17 at 11:59

-1

If you come across this, try $rootScope with $locationChangeStart as suggested in the comments. Or if you are using Angular UI-Router, use $stateChangeStart:

$rootScope.$on('$stateChangeStart', warnIfUnsavedChanges);

$routeChangeStart if using ngRoute.

Difference between $locationChangeStart, $routeChangeStart, and $stateChangeStart

edited May 23 '17 at 11:59

Community

1
1

answered Jan 20 '16 at 13:40

What-About-Bob

649
5
13

Angularjs $locationChangeStart doesn't trigger

1 Answers1