Menu
Below is the code so far
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> <script type="text/javascript"> function Ctrl($scope) { var initial = {text: 'initial value'}; $scope.myModel = angular.copy(initial); $scope.revert = function() { $scope.myModel = angular.copy(initial); $scope.myForm.$setPristine(); } } </script> </head> <body> <form name="myForm" ng-controller="Ctrl"> myModel.text: <input name="input" ng-model="myModel.text"> <p>myModel.text = {{myModel.text}}</p> <p>$pristine = {{myForm.$pristine}}</p> <p>$dirty = {{myForm.$dirty}}</p> <button ng-click="revert()">Set pristine</button> </form> </body> </html> How to alert on browser close or url redirect in case there is some unsaved data, so that user can decide whether to continue?
375
Something like this should do it:
<!doctype html> <html ng-app="myApp"> <head> <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> <script type="text/javascript"> function Ctrl($scope) { var initial = {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> <form name="myForm" ng-controller="Ctrl" confirm-on-exit> myModel.text: <input name="input" ng-model="myModel.text"> <p>myModel.text = {{myModel.text}}</p> <p>$pristine = {{myForm.$pristine}}</p> <p>$dirty = {{myForm.$dirty}}</p> <button ng-click="revert()">Set pristine</button> </form> </body> </html> Note that 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.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
