Transfer data from one html to another using AngularJS services (data share between controllers)

Question

I have looked up several posts with similar issue but was unable to find a solution for my case.

I have a search page that sends a request to the backend an populates the page with search results (each result is an object). I display a concise view of each object and, upon a mouse click on a specific object, the user should be redirected to a page that shows a more detailed view for that object.

On my JS side, I have one controller that handles the $http.post call and retrieves the objects from the backend to display on the first page. I use a different controller for the second page to try and get the relevant object from the first controller (through angular's .service ), but for some reason I get an empty object on the second page. The service works with a getter and a setter. The service is able to set the object just fine, through the first controller, and I am able to print it. However, when redirecting to the second page, while using the second controller's getter, the object gets deleted and shows as empty for some reason.

Here is the relevant code. The service:

app.service('shareService', function(){
  var savedData = {}
  function set(data) {
    savedData = data
    console.log(savedData);
  }
  function get() {
    console.log(savedData);
    return savedData;
  }

  return {
    set: set,
    get: get
  }
});

The search (setter) contoller:

app.controller('SearchCtrl', function(shareService, $scope, $http) {
   $scope.sendSearch = function() {
     $http.post("http://localhost:9080/MedNetApp/rest/mednet/searchCollections",   json).success(function (response) {  
    $scope.collections = response.searchResults;
    shareService.set($scope.collections);
     });
   };
 });

The second (getter) controller:

app.controller('CollectionsCtrl', function(shareService, $scope){
  $scope.collections = shareService.get();  
})

Not sure if this is relevant, but here is also the html part where I set up a temporary test button to redirect to the second page:

<button id=mixing type = "button" class="btn btn-primary-aligned"
        data-ng-click = "go('second-page.html')">temp</button>

So, at the end, savedDatashows as empty object when printing it the second time through the get() function. Any idea why this is not working? or a better way to send data to a new page?

EDIT - I should mention that I basically relied on this solution: AngularJS - Passing data between pages

Can you provide us a plunker for your code above? https://plnkr.co/edit/ — amanuel2, Mar 07 '16 at 22:56
So I tried but I am not sure why my code doesn't render properly on plnkr. It works on my local environment though, and the only problem is, as said, when redirecting to the new page. the post request works fine, I am getting the requested object, and I am able to redirect to a different page and present some content in it (except of the content I am trying to retrieve from the previous page obviously). I believe that I have attached all the relevant lines of codes which deal with that specific task. — GuyTal, Mar 07 '16 at 23:22

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

So, after further research, I came across this solution:

Sharing Data between pages in AngularJS returning empty

I used sessionStorage in my service, as described in the link above, and it fixed the problem.

edited May 23 '17 at 12:07

Community

1
1

answered Mar 08 '16 at 01:29

GuyTal

207
5
17

score 0 · Answer 2 · answered Mar 08 '16 at 01:37

0

Use localStorage or sessionStorage

 var myJson ={};
 localStorage.set("your_Data",myJson);
 // to get the value from another page
 var returnJson  = localStorage.get("Your_Data");

answered Mar 08 '16 at 01:37

Ranjith Kumar

75
1
9

Transfer data from one html to another using AngularJS services (data share between controllers)

2 Answers2