AngularJS – 保存路由之间的数据

前端之家收集整理的这篇文章主要介绍了AngularJS – 保存路由之间的数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在路线之间保存数据的最佳方式是什么?
所以我有一个表单有4个步骤,我希望将上一步的数据转移到下一步。

现在,我使用“服务”保存数据,这是有效的。然而,问题是由于“服务”是单身人士,远离表格,并返回,仍然拥有以前不完整或被遗弃的形式的所有数据。

有没有办法解决这种情况?

谢谢,
T恤

为什么在以下情况下不提升服务以保留删除存储的数据?

>用户没有填写表单,并远离整个表单提交过程
>用户提交表单

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

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',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控制器的父控制器,那么在该控制器中,您可以监视路由更改:

$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
 });
原文链接:https://www.f2er.com/angularjs/144702.html

猜你在找的Angularjs相关文章