0

I have 2 controllers FirstController, SecondController and a service as follow :

app.factory('Data', function(){
    return [];
});

I use the service into both controllers like this :

app.controller("FirstController", function($scope, $http, Data) { 

// getting an JSON array using $http.get() and storing it into Data.myArray for example

}

app.controller("SecondController", function($scope, $http, Data) { 

// I want to do something like this, to recover the array from the Service 
$scope.recoveredArray = Data.myArray;
// then do stuff to the reoveredArray...

}

and finally displaying the recoveredArray from the SecondController to the html view.

Thank you very much in advance.

Dwix
  • 1,139
  • 3
  • 20
  • 45
  • 1
    If you use $http.get().then(..) and then you store the response in Data.myArray, you have to let the second controller know that the first has updated the array, is this what you're looking for? Also you cannot access myArray as you suggested if you don't create such variable in the Data factory. – emil.c Mar 01 '16 at 21:54
  • Yes, I needed to define the array in the Service, thanks. – Dwix Mar 01 '16 at 21:59
  • 1
    What I meant is that even though you define it as the JanS's answer suggests, you won't get updated data in the second controller if you load up these two controllers at the same time. Are you loading them up both at the same time? – emil.c Mar 01 '16 at 22:02
  • 1
    @Emilc, once `FirstController`'s .then executes, `$scope.recoveredArray` of the second controller will be synchronized. – JanS Mar 01 '16 at 22:05
  • 1
    What I meant is that if you are using that array in the second controller in the DOM as a model, it won't update the DOM when .then execution is finished and array is updated in the first controller. – emil.c Mar 01 '16 at 22:09
  • I don't execute them at the same time. I execute the FirstController to fill up the array, then I execute the SecondController which uses the values in the array, and then I'll execute another controller..etc – Dwix Mar 01 '16 at 22:14
  • Possible duplicate of [Passing data between controllers in Angular JS?](http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js) – emil.c Mar 01 '16 at 22:14
  • No duplicate, I need to know how to define a service that returns the array set by a controller then use it in another controller. – Dwix Mar 01 '16 at 22:16
  • The answer from the duplicate tells you exactly what you need to know to define an array and then be able to access it in both controllers. – emil.c Mar 01 '16 at 22:18
  • But the exact solution needed is provided in my post, not the other one. – Dwix Mar 01 '16 at 22:20
  • @JanS, if you check the possible duplicate I mentioned above, in the answer's comments the author mentions that the controller won't get updated. You'd have to use broadcast/emit + on to update the controller's scope. – emil.c Mar 01 '16 at 22:26
  • Ok thanks, I'll try to understand what's happening. – Dwix Mar 01 '16 at 22:34
  • @Emilc that's not entirely true...you certainly can share an array without needing to notify controllers of changes. You can also share promises – charlietfl Mar 01 '16 at 23:25
  • @charlietfl I created a fiddle https://jsfiddle.net/emilcieslar/dnn4ytqw/ to illustrate what I'm trying to say. I simulate the $http request with setTimeout to delay the update of the array. As you can see the shared array from the service won't get updated in the DOM. In order to get updated, you must use broadcast or emit to let the controller know. – emil.c Mar 02 '16 at 09:14
  • 1
    @Emilc but you are changing scope outside of angular context. That is a completely different thing. Use `$timeout` instead of `setTimeout` and you will see the update in first controller view . https://jsfiddle.net/dnn4ytqw/8/ – charlietfl Mar 02 '16 at 13:28
  • @charlietfl That's quite interesting, thanks for pointing that out. I was completely convinced that it doesn't update the controller as I was working on a similar thing some time ago and it just didn't update it with $http call, which is weird, because now I updated my fiddle to use $http call and it does really update the scope. Thanks very much, I must refactor my own code. – emil.c Mar 02 '16 at 13:47
  • @Emilc possibly you were reassigning the array and breaking original array reference. As long as reference isn't broken then inheritance will be maintained and internal watches will update any views. Or if you were updating the model outside of angular .. in which case `$apply()` would be needed – charlietfl Mar 02 '16 at 13:49
  • I was assigning the variable with new values that's true, but not defining it again so how come the original reference was broken? Let's say I defined the variable with var myVar = []; and then later in the code in the $http response I assigned it with a response myVar = response (where response contained an array). Does this break the reference? Also the $http call was inside the service, so I updated the invoices inside the service, not in a call in the controller. – emil.c Mar 02 '16 at 13:55
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105149/discussion-between-emilc-and-charlietfl). – emil.c Mar 02 '16 at 14:12

1 Answers1

1

Your service needs to return an object with e.g. the property myArray. 

app.factory('data', function() {
    return {
      myArray: []
    };
});

See this fiddle I did for another SO question: https://jsfiddle.net/gkmtkxpm/1/

JanS
  • 2,065
  • 3
  • 27
  • 29