Question

我在我的应用程序中有多步骤表单，我想在进入下一步之前保存它... 我做了一个简单的例子，但我不确定它是否是正确的方法。我使用了resolve config和service来访问formData。

配置

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服务的响应来触发状态转换。这样，您可以在继续下一步之前验证并保存数据。当某人移动到非多步形式的其他状态时，它还会阻止您保存数据。

使用uirouter在状态更改之前保存表单

1 个答案: