Angular: share asynchronous service data between controllers

Question

I would like to "bind the change" of asynchronous data between controllers.

I know it's a probably a bit confusing but I hope something is possible.

In the following example, if I write something in an input, it works great: http://jsfiddle.net/Victa/9NRS9/

HTML:

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        ControllerA.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>
    </div>
    <hr/>
    <div ng-controller="ControllerB">
        ControllerB.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>       
    </div>
</div>

JS:

angular.module('myApp', [])
    .factory('myService', function($q, $timeout) {
        var message = {
            hello: 'hello world'
        };
        return {
            getMessage : function(){
                return message;
            }
       };
    })

function ControllerA($scope, myService) {
    $scope.message = myService.getMessage();
}

function ControllerB($scope, myService) {
    $scope.message = myService.getMessage();
}

But let's say I grab my data from a server. I would like to "link" the data like in the previous example. http://jsfiddle.net/Victa/j3KJj/

The thing is that I would like to avoid using "$broadcast"/"$on" or sharing the object in the $rootScope.

HTML:

<div ng-app="myApp">
    <div ng-controller="ControllerA">
        ControllerA.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>
    </div>
    <hr/>
    <div ng-controller="ControllerB">
        ControllerB.message = {{message.hello}}<br/>
        <input type="text" ng-model="message.hello"/>       
    </div>
</div>

JS:

angular.module('myApp', [])
    .factory('myService', function($q, $timeout) {
        var message = {};
        return {
            getMessage : function(){
                var deferred = $q.defer();

                $timeout(function() {
                    message.hello = 'Hello world!';
                    deferred.resolve(message);
                }, 2000);

                return deferred.promise;  
            }
       };
    })

function ControllerA($scope, myService) {
    $scope.message = myService.getMessage();
}

function ControllerB($scope, myService) {
    $scope.message = myService.getMessage();
}

Thanks for your help.

Victor

@sza I appreciated your help but using rootScope or $broadcast/$on is not really easy on a large scale application. — Vic
– Vic, Commented Aug 13, 2013 at 15:11

Kia Raad · Accepted Answer · 2013-08-12 22:28:19Z

1

you are returning a promise in the factory's return object and not the actual object itself. so in you scope you should actually wait for the promise to mend a concrete object then assign it to $scope.message

example:

function ControllerA($scope, myService) {
     myService.getMessage().then(function(obj){
              $scope.message=obj
             });
}

i changed your fiddle into something that might be your answer, see this fiddle

answered Aug 12, 2013 at 22:28

Kia Raad

1,3452 gold badges11 silver badges23 bronze badges

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

3 Comments

Kia Raad Over a year ago

Although you'll have to bear in mind that this method is only, and i stress, only usable of you want to have an assignment to an object and mot to some property of that object

flyingL123 Over a year ago

Does this actually answer the question? Won't this only update the message for ControllerA's scope? How do you get the message variable to update in both scopes?

Nate Barbettini Over a year ago

@flyingL123 You would do the same chaining of .then() in ControllerB. Since Angular services are singletons, both controllers will be accessing the same instance of myService.

Collectives™ on Stack Overflow

Angular: share asynchronous service data between controllers

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related