javascript - Sharing dynamic data between two controllers with service AngularJS - Stack Overflow

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 ing back, and it definately does).

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 ing back, and it definately does).

• javascript
• rest
• angularjs
• controller

Share Improve this question Follow asked May 22, 2013 at 23:54 Wandering DigitalWandering Digital 1,86822 gold badges2323 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.