<!-- Original Idea from http://stackoverflow.com/questions/14852802/detect-unsaved-changes-and-alert-user-using-angularjs The listener for $locationChangeStart isn't triggered in this example since AngularJS doesn't handle any routing in such a simple example, but it should work in an actual Angular application. --><!doctype html><htmlng-app="myApp"><head><scriptsrc="http://code.angularjs.org/1.1.2/angular.min.js"></script><scripttype="text/javascript">functionCtrl($scope){varinitial={text:'initial value'};$scope.myModel=angular.copy(initial);$scope.revert=function(){$scope.myModel=angular.copy(initial);$scope.myForm.$setPristine();}}angular.module("myApp",[]).directive('confirmOnExit',function(){return{link:function($scope,elem,attrs){window.onbeforeunload=function(){if($scope.myForm.$dirty){return"The form is dirty, do you want to stay on the page?";}}$scope.$on('$locationChangeStart',function(event,next,current){if($scope.myForm.$dirty){if(!confirm("The form is dirty, do you want to stay on the page?")){event.preventDefault();}}});}};});</script></head><body><formname="myForm"ng-controller="Ctrl"confirm-on-exit> myModel.text: <inputname="input"ng-model="myModel.text"><p>myModel.text = {{myModel.text}}</p><p>$pristine = {{myForm.$pristine}}</p><p>$dirty = {{myForm.$dirty}}</p><buttonng-click="revert()">Set pristine</button></form></body></html>
<!-- Template: --><divconfirm-on-exit="pageCtrl.isDirty()"confirm-message-window="All your changes will be lost."confirm-message-route="All your changes will be lost. Are you sure you want to do this?">
/** * @name confirmOnExit * * @description * Prompts user while he navigating away from the current route (or, as long as this directive * is not destroyed) if any unsaved form changes present. * * @element Attribute * @scope * @param confirmOnExit Scope function which will be called on window refresh/close or AngularS $route change to * decide whether to display the prompt or not. * @param confirmMessageWindow Custom message to display before browser refresh or closed. * @param confirmMessageRoute Custom message to display before navigating to other route. * @param confirmMessage Custom message to display when above specific message is not set. * * @example * Usage: * Example Controller: (using controllerAs syntax in this example) * * angular.module('AppModule', []).controller('pageCtrl', [function () { * this.isDirty = function () { * // do your logic and return 'true' to display the prompt, or 'false' otherwise. * return true; * }; * }]); * * Template: * * <div confirm-on-exit="pageCtrl.isDirty()" * confirm-message-window="All your changes will be lost." * confirm-message-route="All your changes will be lost. Are you sure you want to do this?"> * * @see * http://stackoverflow.com/a/28905954/340290 * * @author Manikanta G */ngxDirectivesModule.directive('confirmOnExit',function(){return{scope:{confirmOnExit:'&',confirmMessageWindow:'@',confirmMessageRoute:'@',confirmMessage:'@'},link:function($scope,elem,attrs){window.onbeforeunload=function(){if($scope.confirmOnExit()){return$scope.confirmMessageWindow||$scope.confirmMessage;}}var$locationChangeStartUnbind=$scope.$on('$locationChangeStart',function(event,next,current){if($scope.confirmOnExit()){if(!confirm($scope.confirmMessageRoute||$scope.confirmMessage)){event.preventDefault();}}});$scope.$on('$destroy',function(){window.onbeforeunload=null;$locationChangeStartUnbind();});}};});//Usage: Example Controller: (using controllerAs syntax in this example)//angular.module('AppModule',[]).controller('pageCtrl',[function(){this.isDirty=function(){// do your logic and return 'true' to display the prompt, or 'false' otherwise.returntrue;};}]);
Comments (0)
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.