CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-factory
Brad Martin
Brad Martin

Reputation: 6177

Bind factory data to angularjs controller

How do I bind the array (conversations) to ng-repeat within the controller below. I've tried binding it in a function, the intent is for this to run when the controller loads up and then bind the data to the view.

Any help appreciated.

.factory('UserMessages', function ($q, $http) {
var conversations = [];
return {
    getMessages: function () {
        var userdata = JSON.parse(localStorage.getItem("userdata")), userID = userdata.ID;
        $http.get('api/Messages/GetUserConversations?id=' + userID)
        .then(function (data) {
            conversations = data.data;
            return conversations;
        })
    }
}
})

The controller:

    .controller('MessagingCtrl', function ($scope, $http, UserMessages, $stateParams, TruckersOnlyUrl) {
console.log('MessagingCtrl loaded.');

UserMessages.getMessages();
});

This isn't a syntax issue as the data is being returned and I've logged it in the console successfully, I just can't figure out how to render it to the view.

I've tried: 

    $scope.msgs = UsersMessages.getMessages();

but no luck.

UPDATE- ANSWER

UserMessages.getMessages().then(function (conversations) {
    $scope.conversations = conversations;
});

.factory('UserMessages', function ($q, $http) {
var getMessages = function () {
    var deferred = $q.defer();
    var userdata = JSON.parse(localStorage.getItem("userdata")), userID = userdata.ID;

    $http.get('api/Messages/GetUserConversations?id=' + userID)
    .then(function (data) {
        deferred.resolve(data.data);
    })
    return deferred.promise;
  };

 return {
    getMessages: getMessages
 };

});

Upvotes: 2

Views: 529

Answers (2)

Daniel
Daniel

Reputation: 423

There are a couple problems here, mostly stemming from a misunderstanding of how an asynchronous function works in javascript.

In this part:

.then(function (data) {
        conversations = data.data;
        return conversations;
})

You're actually not returning conversations from the getConversations call, because the code within the anonymous function is being executed asynchronously. Instead you're returning null from that call.

To oversimplify this, you could do the following: 

getMessages: function () {
        var userdata = JSON.parse(localStorage.getItem("userdata")), userID = userdata.ID;
        $http.get('api/Messages/GetUserConversations?id=' + userID)
        .then(function (data) {
            angular.copy(data.data, conversations);
        })
        return conversations;
 }

What this does is return the conversation object (unpopulated), but once the http request comes back populates it -- using angular.copy avoids changing the reference which would otherwise happen if you just used the '=' operator.

Upvotes: 1

Gordon Bockus
Gordon Bockus

Reputation: 868

You need to return the promise from the $http call in the service, and in your controller add a.then handler to the service method call. In the then handler update your scope property FTW

Upvotes: 1

Related Questions