Angular Shared Service Scope for multiple controllers

Question

I know this has been asked multiple times, i'm trying to share dynamic data with multiple controllers.

Sharing static data was working fine, when i add $http i lost the way.

Below is the demo where i'm trying to implement similar approach.

Demo is working based on static array, i have specified github endpoint which gives similar data. How to make this demo work based on dynamic data.

```

var myApp = angular.module('myApp', []);

myApp.factory('Data', function () {
  return { filtercards: 'Default Data' };
});

myApp.factory('DynamicData', function ($q, $http) {
 var dynamicdataObj = {};

dynamicdataObj.getDynamicData  =  function(type){

   var url = 'https://api.github.com/users/tomalex0/repos'
   $http({
       method: 'GET',
       url: url
    }).then(function successCallback(response) {

    }, function errorCallback(response) {

    });

};

//dynamicdataObj.lists = dynamicdataObj.getDynamicData('GOOG')

dynamicdataObj.lists = [{
 id : 1,
 name : 'First',
 watchers_count  :5
},{
 id : 2,
 name : 'Second'
}];


return dynamicdataObj;
});

function FirstCtrl($scope, Data, DynamicData) {
 $scope.data = Data;
 $scope.lists = DynamicData.lists;


 $scope.toggleLike = function(item){
  item.watchers_count = (item.watchers_count) ? (item.watchers_count+1) : 1;
 }
}

function SecondCtrl($scope, Data, DynamicData) {
 $scope.data = Data;
 $scope.lists = DynamicData.lists;

}

```

http://jsfiddle.net/tomalex0/2j3t6bqh/

charlietfl · Accepted Answer · 2015-10-13 00:35:26Z

1

To keep the array synchronized just update the array with your response without breaking reference and reassigning the array

myApp.factory('DynamicData', function ($q, $http) {
   var dynamicdataObj = {
       lists:[]
   };

   dynamicdataObj.getDynamicData  =  function(type){

       var url = 'https://api.github.com/users/tomalex0/repos'
       $http({
           method: 'GET',
           url: url
        }).then(function successCallback(response) {
           // concatenate without breaking reference that controllers will have
           dynamicdataObj.lists.concat(response.data)
        }, function errorCallback(response) {

        });

    };
    // load the data when service initializes
     dynamicdataObj.getDynamicData()


   return dynamicdataObj;
});

answered Oct 13, 2015 at 0:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

2 Comments

tomalex Over a year ago

concat didn't worked, i tried dynamicdataObj.lists.push.apply(dynamicdataObj.lists, response.data);

tomalex Over a year ago

I have updated the demo which works fine, jsfiddle.net/tomalex0/2j3t6bqh/14 Thanks a lot for your help

curiousgeek · Accepted Answer · 2015-10-13 01:11:57Z

0

As the http response is asynchronous. You need to get a promise back from your service wait on it and assign the value of $scope.lists once the promise is successfully resolved.

Your DynamicData Factory will be

    dynamicdataObj.getDynamicData  =  function(type){

   var url = 'https://api.github.com/users/tomalex0/repos';

   return $http({
       method: 'GET',
       url: url
    });
};

and your FirstCtrl will become :

function FirstCtrl($scope, Data, DynamicData) {
  $scope.data = Data;  

    //Call GetDynamicData in service and wait till promise gets resolved or rejected.
   DynamicData.getDynamicData()
    .then(function(response){
       //Promise resolved successfully in service, assign the returned data to my lists property
       $scope.lists = response.data;
   },function(err){
       $scope.lists = [];
       console.error('something bad happend');
   })

   $scope.toggleLike = function(item){
     item.watchers_count = (item.watchers_count) ? (item.watchers_count+1) : 1;
   }
}

I have updated your jsfiddle with comments for the FirstCtrl here :

http://jsfiddle.net/2j3t6bqh/12/

edited Oct 13, 2015 at 1:11

answered Oct 12, 2015 at 21:39

curiousgeek

8466 silver badges11 bronze badges

2 Comments

tomalex Over a year ago

Hi, I have updated SecondCtrl jsfiddle.net/tomalex0/2j3t6bqh/11 . Issue i can see here is change in one controller is not reflected in the other. If you see here jsfiddle.net/tomalex0/2j3t6bqh. When you change text or like it value changes in both controller.

charlietfl Over a year ago

$http already returns a promise ... it is an anti-pattern to use $q as well ... just return $http

Collectives™ on Stack Overflow

Angular Shared Service Scope for multiple controllers

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related