0

Now I have a page for user to enter some data, which is not form. Such as:

<input type='text' ng-model='ExpReport.ReportName' /> <input type='text' ng-model='ExpReport.startdate' />

there is a exit button to let user go back to where they came from. The problem is if user don't change or modify any input.( assume they just accidently get here) when they hit the exit button, they can directlly go back, but if they made some change, if they want to go back, I need to show a popup to confirm that they want to leave without saving data. How can I catch it?

I try to use $watch, but seems like doesn't work for me:

angular.forEach($scope.ExpReport,function(value,key){
            $scope.$watch('value',function(oldvalue,newvalue){
                   var currenturl = $location.path();
          if(currenturl.indexOf('editreport')>-1){
           $scope.$on('$locationChangeStart', function( event,next,current) {      
              event.preventDefault();
              $scope.existconfirm = true; 
                if(next.indexOf('editreport')>-1) {
                $scope.existconfirm = false;
              }     
              }); 
             }
            })
        })
linyuanxie
  • 777
  • 4
  • 13
  • 31
  • https://docs.angularjs.org/api/ng/directive/ngChange ? – Ronnie Apr 29 '15 at 22:59
  • it's not really clear what you are trying to do here. You listed a pair of input boxes bound to properties of `ExpReport`, and a snippet of angular code which suggests that there may be multiple `ExpReport` on the scope, for each of which you seem to be watching a property called `'value'` that isn't even one of the input boxes. – Claies Apr 29 '15 at 23:00

1 Answers1

1

Add an event listener to the '$locationChangeStart' (or '$stateChangeStart' if using ui-router) event. When it fires ou can prompt the user to make sure they want to lose all their changes.

$scope.$on('$locationChangeStart', function (event) {
    if(userHasUnsavedChanges() && !confirm('Are you sure you want to abandon your changes?')){
        event.preventDefault();
    }
});
HankScorpio
  • 3,612
  • 15
  • 27
  • while this probably works, it doesn't really answer the question as asked, as there is no indication in the question that the poster is even using the `ui-router` plugin which `$stateChangeStart` is a member of. – Claies Apr 29 '15 at 23:03
  • I think this is exactly what the question author needs to do: keep a copy of old data and then check the new form data against it on route change as @HankScorpio recommended. – Vlad Gurovich Apr 29 '15 at 23:24
  • Thank you for information, in userHasUnsavedChanges, How can I check each filed is changed or not? – linyuanxie Apr 30 '15 at 02:15
  • Take Vladimir's suggestion. Make a clone of your data that won't be modified. Compare the two within that function. Really though, it would be much easier to put the inputs in a form. Then you could just check `myFormName.$pristine`. It would be false if anything is modified. – HankScorpio Apr 30 '15 at 06:45