11

I've figured out how to share data between two AngularJS controllers using a shared service in the contrived example below:

(Functioning fiddle)

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

app.factory('UserData', function() {
    var data = {foo: 'bar'};

    return {
        getData: function() {
            console.log('getData');
            return data;
        },
        setData: function(newData) {
            data = newData;
        }
    };
});

function MainCtrl($scope, UserData) {
    console.log('MainCtrl');
    console.log(UserData.getData());
}
MainCtrl.$inject = ['$scope', 'UserData'];

function JobListCtrl($scope, UserData) {
    console.log('JobListCtrl');
    console.log(UserData.getData());
}
JobListCtrl.$inject = ['$scope', 'UserData'];

My issue is that I would like the data held in UserData to come from an Ajax call (presumably using $http).

I tried doing the Ajax call in the UserData factory function but, since it's running asynchronously, MainCtrl and JobListCtrl are executed before the UserData service actually has any data in it.

Can someone give me some direction about how to set that up?

Mark Biek
  • 146,731
  • 54
  • 156
  • 201
  • 1
    See http://stackoverflow.com/questions/12505760/angularjs-processing-http-response-in-service/12513509#12513509 for how to use a promise and then have your controller wait for it to be resolved. – Mark Rajcok Feb 26 '13 at 20:22

2 Answers2

10

I've created this example that shows how to fetch, store and share data (models) across different controllers without loosing its bindable functionality.

Live Example: http://pablodenadai.github.io/SharingModelsAngularJS/

Source code 1: (Resources and Model abstraction) https://github.com/pablodenadai/SharingModelsAngularJS/blob/master/app/scripts/controllers/main.js

Repo: https://github.com/pablodenadai/SharingModelsAngularJS

Hope it helps.

Pablo
  • 2,540
  • 1
  • 18
  • 26
  • 1
    Could be useful to provide a little insight either here or in the Git, for some people that aren't too keen on Angular dependencies, etc. – Augie Gardner Apr 17 '14 at 22:32
  • How might this work for a collection, where say, I'd want to add a model from a "modal" controller and have the main list update when data is saved? Assume that the modal controller is abstract (could be any modal "floating" over the scope of the main controller). – FlavorScape Jun 18 '14 at 00:08
  • 4
    Live example not works at the moment. There isn't a GitHub Page here. – Sergey P. aka azure Aug 18 '14 at 07:58
3

Here are some starting points to help you out:

  1. How to get the data from the server (and how to construct a basic 'model' service): SO post

  2. How to hold the controller execution until data is fetched from the server: screencast from egghead.io

Community
  • 1
  • 1
Stewie
  • 60,366
  • 20
  • 146
  • 113
  • If services are singletons (same data everywhere), how do i define a ModelType and create instances of that type that can be accessed from multiple controllers? http://stackoverflow.com/questions/24291136/best-practice-to-update-parent-or-other-simultaneous-angular-controllers – FlavorScape Jun 18 '14 at 18:48