If user 'touches' form inputs on profile & forgets to save: show `POP UP` when they click SideMenu icon

Question

I've tried to come up with some sort of "error checker/validation" for my users IF they forget to Save the edits they made on their profiles.

The user enters the Profile.html state. They start to update some of their info (i.e name, phone number, etc.). INSTEAD of pressing the SAVE CHANGES button they navigate away from the Profile state by clicking the SideMenu icon at the top left of their mobile screen.
Since the form is technically now consider to be "$dirty". I've tried to use this angular property at first but I couldn't really get the results I wanted so I tried my luck with $watch..

ProfileController.js

$rootScope.isFormDirty = false;//global variable 'isFormDirty'->inject in controller.js (toggleLeftSideMenu())
$scope.$watch('updateDriverProfileInfo', function(newValue, oldValue) {//new & oldValue = ng-model when form is 1st 'viewed' is dirty
  //http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
  if (newValue !== oldValue) {
    // console.log("updatingg")
    $rootScope.isFormDirty = true;
  }
}, true);

Angular docs on $watch

Maybe I should of made a factory or Service for this now that I think about it but at the time I used $rootScope so that I can set a global variable isFormDirty on this controller and use it on the General Controller that holds the Side Menu's logic in this Ionic app.

controller.js (this is where the Controller for the SideMenu is)

   $scope.sidemenuIsOpen = false; 
    $scope.toggleLeftSideMenu = function() {//ng-click from menu.html
      $scope.sidemenuIsOpen = !$scope.sidemenuIsOpen;

      if ($scope.sidemenuIsOpen && $rootScope.isFormDirty) {

        var confirmPopup = $ionicPopup.confirm({
          title: 'Changes were not saved',
          template: 'Do you want to save your changes?',
        });

        confirmPopup.then(function(res) {
          if (res) {
            console.log('Run updateDriverProfile()');
          } else {
            console.log('Allow user to continue w/o changes');
          }
        });
      }
    };

That's basically the gist of my code. It actually "works" but I have identified a pattern and this is where I need your assistance to either suggest a whole different method to accomplish this or perhaps some refactoring tips for this current code.

The Pop up does show when the user clicks on the Side Menu button BUT I don't think it really matters if the form is $dirty or not..

The bigger issue is that the Pop up starts showing regardless if you are trying to leave the profile.html view or any other view for that matter.

When I wrote this code I was under the impression that the Pop up and toggleLeftSideMenu functions would ONLY work on the Profile view since I am "watching" the updateDriverProfileInfo object and I also created that global variable to use between the Menu Controller and Profile Controller.

score 0 · Answer 1 · answered Apr 28 '16 at 04:05

you need to have a good understanding on ionic Lifecycle, try with any of the below events

$scope.$on('$ionicView.leave', function(){
  // Anything you can think of
});

$scope.$on('$ionicView.beforeLeave', function(){
  // Anything you can think of
});

$scope.$on('$ionicView.unloaded', function(){
  // Anything you can think of
});

find more information here http://www.gajotres.net/understanding-ionic-view-lifecycle/

If user 'touches' form inputs on profile & forgets to save: show `POP UP` when they click SideMenu icon

1 Answers1