AngularJS - 在路由之间保存数据 [英] AngularJS - saving data between routes
问题描述
在路线之间保存数据的最佳方式是什么?
所以我有一个包含 4 个步骤的表单,我希望将上一步的数据转移到下一步.
What would be the best way to save data between routes?
So I have a form that has 4 steps and I would like for the data from a previous step to be carried over to the next step.
现在,我正在使用服务"来保存数据,这很有效.然而,问题是因为服务"是单例的,离开表单然后回到表单,仍然会拥有之前不完整或废弃表单的所有数据.
Right now, I'm using a "service" to save the data, which works. However, the problem is since a "service" is singleton, navigating away from the form, and coming back to it, will still has all the data from a previous incomplete or abandoned form.
这种情况有什么好的解决办法吗?
Is there a good way to solve this kind of situation?
谢谢,
三通
推荐答案
在以下情况下为什么不增强服务以照顾删除存储的数据:
Why don't you enhance the service to take care of deleting the stored data when:
- 用户没有完成表单并离开了整个表单提交过程
- 用户提交表单
基本上,您可以按如下方式增强您的服务:
Basically, you could enhance your service as follows:
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 = {};
}
};
});
您的控制器可能如下所示:
Your controller could then be as follows:
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()
函数.如果您有类似于 Form 步骤控制器的父控制器,那么在该控制器中,您可以监视路由更改:
Another alternative is to call the service's resetData()
function when the route changes to something that is not within the form application. If you have something like a Parent Controller for the Form step controllers, then in that controller, you could keep a watch over the route change:
$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
});
这篇关于AngularJS - 在路由之间保存数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!