CODEWITHSUNDEEP
javascriptangularjscontroller
ste
ste

Reputation: 3269

AngularJS factory for sharing data between controllers

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?

Upvotes: 0

Views: 424

Answers (3)

ste
ste

Reputation: 3269

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?

Upvotes: 0

Ruben.sar
Ruben.sar

Reputation: 386

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

Upvotes: 1

Nicholas Anderson
Nicholas Anderson

Reputation: 404

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>

Upvotes: 0

Related Questions