Angular store value to service to acces on multiple pages

Question

SOLUTION: It seemed that my .get() function invoked before I could update the variable 'something' and therefore it didn't show the updated variable.

When I tested it on the real page it worked like a charm :)

final FIDDLE

note: I did add a return to the set function to immediately update the view.

---

UPDATE: got my factory working alright but can't get the value bound to the factory .set() function. FIDDLE

---

I’m building a manual to install a USB-network connector and need to store some variables to show the right content across multiple pages (within the same controller tough).

After doing some research it seems 'services' are the right way to do this however I can't get them to work.

It does work when I put the function inside the controller itself but it get's reset to '[]' again when I change page.

function inside controller as I have it right now is:

$scope.isActiveSystem = [];

$scope.activeSystem = function(name) {
    $scope.isActiveSystem = name.value;
}

Can someone point me in the right direction how to put this inside a service or give me an example to study so I can understand better what's going on?

Also, should I store my data in a factory or some service?

My attempt to make a service: FIDDLE

Answer 1

You're not far from the solution.

Seriously, I used to try to remember the difference between service and factory. In the end, both can be used exactly in the same way, to fulfill the same requirement.

app.factory('dmFactory', function() {
//name.value should equal to system.value from the controller 
var somethingIWantToRemember = {};
return {
   set: set,
   get: get
}

function get(key){      //You can forget about the key if you want
    return somethingIWantToRemember[key];
}

function set(key, value){
    somethingIWantToRemember[key] = value;
}

});

and in your controller, you just have to call both functions that way :

$scope.something = dmFactory.get(key);

or

dmFactory.set(key, $scope.something);

Answer 2

From your controller, if your reset it when page load, it is normal that your data gets reseted.

You need to : - inject your service into your controller

app.controller('myCtrl',['myService',function(myService){
  
  }]);

• create a get function from your service to retreive the value of the variable

factory.getVal = function(){
  return val;  
};

• call the get function at start of your controller as

$scope.isActiveSystem = myService.getVal();