angularjs - Save form before state change with uirouter -

i have multi steps form in application , save before go next step... did simple example, i'm not sure if it's right approach. used resolve config , service access formdata.

config

app.config(function($stateprovider, $urlrouterprovider) {              $urlrouterprovider.otherwise("/");            $stateprovider             .state('home', {                 url : '/',                 controller : 'appctrl',                 templateurl : 'partials/home.html',                 resolve : {                     saveform : function($state, formdata){                      }                 },             })                .state('home.state1', {                     url: "state1",                     templateurl : 'partials/item1.html',                     resolve : {                         saveform : function($state, formdata){                             return formdata.save();                         }                     },                 })                 .state('home.state2', {           url: "state2",            templateurl : 'partials/item2.html',           resolve : {             saveform : function($state, formdata){                return formdata.save();              }            }                 })          }); 

controller

app.controller('appctrl', function($scope, $rootscope, $state, saveform, formdata){         $scope.formdata = {};         $scope.tempdata = {};          $rootscope.$on('$statechangestart', function(event){              console.log($scope.tempdata , $scope.formdata)              if(!_.isequal($scope.tempdata , $scope.formdata)){                 console.log('ok change detected, save')                  var temp = {}                  formdata.set(angular.copy($scope.formdata));              }else{                 console.log('no change')             }          });          $rootscope.$on('$statechangesuccess', function(event){             var temp = formdata.get();              if(object.keys(temp).length!=0){                 formdata.cancel();                 angular.copy(temp, $scope.tempdata );                 angular.copy(temp, $scope.formdata );             }         });      }) 

service

app.service('formdata', function($q, $timeout){         this.formdata = {};          this.save = function(){             if(object.keys(this.formdata).length===0)                  return false;              var deferred = $q.defer();              $timeout(function() {                 this.formdata.test = "yeah test";                 deferred.resolve(this.formdata);                 //this.formdata = {};             }.bind(this), 1000);              return deferred.promise;          }          this.cancel = function(){             this.formdata = {};         }          this.set = function(data){             this.formdata = data;         }          this.get = function(){             return this.formdata;         }     }) 

example on codepen : http://codepen.io/anon/pen/rwpzgj

i approach differently.

you're using multiple states 1 single form. want save complete form data. therefore devide form multiple sections can show/hide. way, upon clicking "next" button can validate each step separately , show next step once current 1 valid.

once you've reached last step of form, can save whole thing in 1 go.

if insist on using separate states:

you're using state change trigger save action. instead, use response of formdata service trigger statechange. way can validate , save data before move on next step. prevents saving data when moves state not in multi-step form.