angularjs - AngularJS - 在路由之间保存数据

Question

在路线之间保存数据的最佳方法是什么？
所以我有一个包含 4 个步骤的表单，我希望将上一步的数据转移到下一步。

现在，我正在使用“服务”来保存数据，这很有效。但是，问题在于，由于“服务”是单例的，因此离开表单并返回表单时，仍将拥有来自先前不完整或废弃表单的所有数据。

有没有解决这种情况的好方法？

谢谢你，
三通

Answer 1

为什么不增强服务以在以下情况下删除存储的数据：

• 用户未完成表单并离开整个表单提交过程
• 用户提交表单

基本上，您可以通过以下方式增强您的服务：

myApp.factory('myService', function () {
    var formData = {};

    return {
        getData: function () {
            //You could also return specific attribute of the form data instead
            //of the entire data
            return formData;
        },
        setData: function (newFormData) {
            //You could also set specific attribute of the form data instead
            formData = newFormData
        },
        resetData: function () {
            //To be called when the data stored needs to be discarded
            formData = {};
        }
    };
});

您的控制器可能如下所示：

myApp.controller('FirstStepCtrl', ['$scope', 'myService', function ($scope, myService) {
    //This is the controller of the first step in the form
    //Reset the data to discard the data of the previous form submission
    myService.resetData();

    //Remaining Logic here
}]);

myApp.controller('LastStepCtrl', ['$scope', 'myService', function ($scope, myService) {
    //This is the controller of the last step in the form

    //Submits the form
    $scope.submitForm = function () {
        //Code to submit the form

        //Reset the data before changing the route - assuming successful submission
        myService.resetData();

        //Change the route
    };

    //Remaining Logic here
}]);

另一种选择是resetData()在路由更改为不在表单应用程序中的内容时调用服务的函数。如果您有类似表单步骤控制器的父控制器，那么在该控制器中，您可以监视路由更改：

$scope.$on('$routeChangeStart', function() { 
   //Use $location.path() to get the current route and check if the route is within the 
   //form application. If it is, then ignore, else call myService.resetData()

   //This way, the data in the forms is still retained as long as the user is still
   //filling up the form. The moment the user moves away from the form submission process,
   //for example, when explicitly navigating away or when submitting the form, 
   //the data is lost and no longer available the next time the form is accessed
 });

Answer 2

Services将在您的应用程序的整个生命周期中持续存在。所以你不应该有任何问题。您需要做的就是创建一个Service并将其注入需要访问它的控制器。例如，下面我User向控制器注入了服务。

只需为您的每条路线使用不同的控制器，这样您在范围内的模型就不会被覆盖。

第一个路线的第一个控制器，

app.controller("FirstPageController", function($scope,User){   
    $scope.user = User;
    $scope.user.firstName  = "Emre";
    $scope.user.secondName = "Nevayeshirazi";
});

第二个路线的第二个控制器，

app.controller("SecondPageController", function($scope,User){ 
    $scope.user = User;  
    $scope.user.age = 24;
});