AngularJS - lưu dữ liệu giữa các tuyến

Question

Cách tốt nhất để lưu dữ liệu giữa các tuyến là gì?
Vì vậy, tôi có một biểu mẫu có 4 bước và tôi muốn dữ liệu từ bước trước đó được chuyển sang bước tiếp theo.

Hiện tại, tôi đang sử dụng "dịch vụ" để lưu dữ liệu, hoạt động. Tuy nhiên, vấn đề là do "dịch vụ" là singleton, điều hướng khỏi biểu mẫu và quay trở lại với nó, sẽ vẫn có tất cả dữ liệu từ biểu mẫu chưa hoàn chỉnh hoặc bị bỏ qua trước đó.

Có cách nào tốt để giải quyết tình huống này không?

Cảm ơn bạn,
Tee

Answer 1

Services sẽ kéo dài trong suốt cuộc đời của các ứng dụng của bạn. Vì vậy, bạn không nên có bất kỳ vấn đề. Tất cả những gì bạn cần làm là tạo một Service và tiêm nó vào bộ điều khiển cần truy cập nó. Ví dụ, bên dưới tôi đã tiêm dịch vụ User cho bộ điều khiển.

Chỉ cần sử dụng các bộ điều khiển khác nhau cho từng tuyến đường của bạn sao cho phạm vi bên trong mô hình của bạn sẽ không bị ghi đè.

điều khiển đầu tiên cho tuyến đường đầu tiên,

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

điều khiển thứ hai cho tuyến đường thứ hai,

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

Answer 2

Tại sao bạn không nâng cao dịch vụ chăm sóc xóa các dữ liệu được lưu trữ khi:

• Người dùng không hoàn thành biểu mẫu và điều hướng khỏi toàn bộ quá trình gửi biểu mẫu
• Người dùng submit form

Về cơ bản, bạn có thể nâng cao dịch vụ của bạn như sau:

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

điều khiển của bạn sau đó có thể thực hiện như sau:

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

lựa chọn khác là gọi hàm resetData() của dịch vụ khi tuyến đường thay đổi thành một thứ không nằm trong ứng dụng biểu mẫu. Nếu bạn có một cái gì đó giống như một điều khiển cha mẹ cho bộ điều khiển bước Form, sau đó trong bộ điều khiển đó, bạn có thể giữ một chiếc đồng hồ trên các thay đổi tuyến đường:

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