How to show a warning message when user leaves without saving changes

Question

I wrote a directive that watches for $locationChangeStart events and shows the user a message if the form has unsaved changes. The problem is that the event handler is never triggered. Here is simplified version of my code in notify-on-location-change.js

    (function() {
    'use strict';


    angular.module('myApp.directives').directive('notifyOnLocationChange', ['$scope', 'event', 'next', 'current', function ($scope, event, next, current) {

        $scope.$on('$locationChangeStart', function () {                
            if (true) {
                alert('Unsaved data!');
            }                

        });

        $scope.$on('$stateChangeStart', function () {                
            if (true) {
                alert('Unsaved data!');
            }                

        });


    }]);

})();

I then mark the form I want to trigger the warning:

 <form name="detailsForm" ng-submit="$ctrl.onSubmit()" novalidate notifyOnLocationChange>

notify-on-location-change.js is included in index.html

What am I missing here?

Answer 1

Change the form attribute to notify-on-location-change

See https://stackoverflow.com/a/19503227/584846 for more details