sourcetip

AngularJS - 경로 간 데이터 저장

fileupload 2023. 10. 15. 17:33
반응형

AngularJS - 경로 간 데이터 저장

경로 간에 데이터를 저장하는 가장 좋은 방법은 무엇입니까?
그래서 저는 4단계의 양식을 가지고 있는데 이전 단계의 데이터를 다음 단계로 이월하고 싶습니다.

지금은 '서비스'를 이용해 데이터를 저장하고 있는데, 이는 효과가 있습니다.그러나 문제는 "서비스"가 싱글톤이고, 그 양식에서 벗어나 탐색한 후 다시 그 양식으로 되돌아오는 것은 이전의 불완전하거나 버려진 양식의 모든 데이터를 여전히 가지고 있다는 것입니다.

이런 상황을 해결할 수 있는 좋은 방법이 있을까요?

감사해요.

다음과 같은 경우에 저장된 데이터를 삭제하도록 서비스를 강화하는 것은 어떨까요?

  • 사용자가 양식을 완성하지 않고 전체 양식 제출 프로세스에서 벗어나 탐색합니다.
  • 사용자가 양식을 제출합니다.

기본적으로 다음과 같이 서비스를 향상시킬 수 있습니다.

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()경로가 양식 응용 프로그램 내에 없는 것으로 변경될 때 기능합니다.Form 단계 컨트롤러를 위한 Parent Controller와 같은 것이 있는 경우 해당 컨트롤러에서 경로 변경을 감시할 수 있습니다.

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

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

언급URL : https://stackoverflow.com/questions/16802857/angularjs-saving-data-between-routes

반응형