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

admin管理员组

文章数量:1335445

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.

本文标签： javascriptSharing dynamic data between two controllers with service AngularJSStack Overflow