AngularJS factory for sharing data between controllers

Question

I have an AngularJS application (1.4.10) and I need to share some data between two controllers.

So I made my factory:

.factory('CardsForService', function($http, URL){
    var service = {
        "block_id": '',
        "service_id": ''
    };

    service.save_data = function(block_id, service_id){
        service.block_id = block_id;
        service.service_id = service_id;
    };

    service.get_data = function(){
        return service;
    };

    return service;
})

I insert the data in the first controller:

$scope.open = function(id, type){
    console.log(id +" "+type);
    CardsForService.save_data(id, type);
    ...

And I try to get the data in another controller, like this:

$scope.$on('$routeChangeSuccess', function() {
    if  (algo_to_used == "service"){
        var data = CardsForService.get_data();
        console.log(data);
    } else {
    }
});

The console.log output this:

Object {block_id: "", service_id: ""}

If I try the same get_data() function in the same controller where I call the save_data() function I have the correct results.

What am I missing?

I created a quick plunk (plnkr.co/edit/ariglr58rS21918yQc26?p=preview) with just your code that is relative to interaction between the 2 controllers and the service and it works just fine. Your issue may be somewhere in the code that you aren't showing us. Are you sure that you injected CardsForService into both controllers? — jbrown
– jbrown, Commented Jul 7, 2016 at 14:10

Ruben.sar · Accepted Answer · 2016-07-08 06:20:15Z

1

Change Factory Like this

app.factory('CardsForService', function(){
var service = {
    "block_id": '',
    "service_id": ''
};

var save_data = function(block_id, service_id){
    service.block_id = block_id;
    service.service_id = service_id;
};

var get_data = function(){
    return service;
};

return{
   saveData:save_data,
   getData:get_data
}});

And in controllers

app.controller('FirstCtrl',function(CardsForService){
    CardsForService.setData(id, type);
});

app.controller('SecondCtrl', function($scope, CardsForService){
    $scope.data = CardsForService.getData();
});

edited Jul 8, 2016 at 6:20

answered Jul 7, 2016 at 14:45

Ruben.sar

3863 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ste Over a year ago

this line: app.controller('SecondCtrl', function($scope.CardsForService){ throws and error (module not avaible) and without that line I have the same problem as before..!

Ruben.sar Over a year ago

yeah, I'm sorry , instead a semicolon I wrote dot

Nicholas Anderson · Accepted Answer · 2016-07-07 14:33:03Z

0

This sounds like it could be a timing issue. Data from a service like this isn't reactive. Here's a snippet that should help visualize it.

var app = angular.module("demo", []);

app.factory("MySvc", function() {
  var data = {};
  data.setData = function(key, value) {
    this[key] = value;
  }
  data.getData = function(key, def) {
    return key in this ? this[key] : def;
  };
  return data;
});

app.controller("test1", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(100).then(function() {
      MySvc.setData("foo", "bar");
      $scope.data = MySvc.getData("foo");
    });
  }
]);

app.controller("test2", ["$scope", "MySvc", "$timeout",
  function($scope, MySvc, $timeout) {
    $timeout(500).then(function() {
      $scope.data = MySvc.getData("foo", "baz");
    });
  }
]);

app.controller("test3", ["$scope", "MySvc",
  function($scope, MySvc) {
    $scope.data = MySvc.getData("foo", "asdf");
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js "></script>

<div ng-app="demo">
  <pre ng-controller="test1">Test 1: {{ data }}</pre>
  <pre ng-controller="test2">Test 2: {{ data }}</pre>
  <pre ng-controller="test3">Test 3: {{ data }}</pre>
</div>

answered Jul 7, 2016 at 14:33

Nicholas Anderson

4042 silver badges7 bronze badges

1 Comment

ste Over a year ago

The second controller is in a new page, so the browsers needs to load it...I think that the factory is still faster than a page loading!

ste · Accepted Answer · 2016-07-08 15:37:37Z

0

Ok I solved the problem. Basically before I was using this code for the redirect to the new page:

$window.location.assign('/cards/service');

And now I switched to this code:

$location.path('/cards/service');

And it's working.

The only thing is that when it wasn't working when I redirect the page the console in the chrome inspector refresh for every reloading, now the console do not refresh. Can someone tell me the difference between those two functions?

answered Jul 8, 2016 at 15:37

ste

3,2895 gold badges46 silver badges78 bronze badges

Collectives™ on Stack Overflow

AngularJS factory for sharing data between controllers

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related