Sharing dynamic data between two controllers with service AngularJS

Question

I have two angular services that need to share models (a list of messages and an individual message), which they get from a call to our API. The service is as follows:

angular.module('CmServices', ['ngResource'])
.factory('Messages', function ($resource, $routeParams, $rootScope) { 

    var data = {};

    data.rest = $resource(url, {}, {
            query: {method:'GET', params: params},
            post: {method:'POST', params: params}
        });

    // Trying to set this through a call to the API (needs to get param from route)
    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
            var messages = data.rest.query({m_gid: $routeParams.gid}, function () { 
                data.messages = messages;
            });
    });

    return data;    
});

and the controllers are:

function MessagesCtrl ($scope, $http, $location, $routeParams, Messages) {
   $scope.messages = Messages.messages;
}

function MessageCtrl ($scope, $http, $location, $routeParams, Messages) {
   $scope.messages = Messages.messages[0];
}

But neither of the controllers update when the data loads from the REST API (I've logged the data coming back, and it definately does).

score 8 · Accepted Answer · answered May 23 '13 at 03:49

8

Instead of assigning a new array to data.messages like this:

data.messages = messages

use angular.copy() instead, which will populate the same array:

angular.copy(messages, data.messages)

That way, the controllers will see the update.

answered May 23 '13 at 03:49

Mark Rajcok

362,217
114
495
492

score 0 · Answer 2 · answered May 23 '13 at 00:28

The problem is that you are returning a different version of data to each controller. I would place messages in $rootScope. So

data.rest.query({m_gid: $routeParams.gid}, function () { 
            $rootScope.messages = messages;
        });

Incidentally, what is the purpose of setting the return value of data.rest.query to var messages? That variable gets blown as soon as you leave the function.

Sharing dynamic data between two controllers with service AngularJS

2 Answers2