Сохранить форму перед изменением состояния с помощью uirouter

Question

У меня есть многоэтапная форма в моем приложении, и я бы хотел ее сохранить, прежде чем перейти к следующему шагу ... Я сделал простой пример, но я не уверен, правильный подход. Я использовал конфигурацию разрешения и службу для доступа к 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(); 

      } 
      } 
       }) 

     }); 

Контроллер

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); 
      } 
     }); 

    }) 

служба

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; 
     } 
    }) 

Пример на codepen: http://codepen.io/anon/pen/RWpZGj

Answer 1

Я бы поступил иначе.

Вы используете несколько состояний для одной формы. Обычно вы хотите сохранить только данные формы. Поэтому я бы разделил форму на несколько разделов, которые вы можете показать/скрыть. Таким образом, после нажатия на кнопку «Далее» вы можете проверить каждый шаг отдельно и показать следующий шаг, как только текущий будет действителен.

Как только вы достигли последнего шага формы, вы можете сохранить все за один раз.

Если вы настаиваете на использовании отдельных состояний:

Вы используете изменение состояния, чтобы вызвать сохранить действие. Вместо этого используйте ответ своего сервиса FormData, чтобы вызвать изменение состояния. Таким образом, вы можете проверить и сохранить свои данные, прежде чем переходить к следующему шагу. Это также предотвращает сохранение данных, когда кто-то переезжает в другое состояние, которое не находится в вашей многоступенчатой ​​форме.