Bind factory data to angularjs controller

Question

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
 };

});

Gordon Bockus · Accepted Answer · 2015-02-09 23:54:22Z

1

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

answered Feb 9, 2015 at 23:54

Gordon Bockus

8686 silver badges11 bronze badges

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

2 Comments

Brad Martin Over a year ago

Did a quick google search on what you recommended and came across markdalgleish.com/2013/06/using-promises-in-angularjs-views blog post which gave me something to look at. Thanks for the suggestion.

Gordon Bockus Over a year ago

Sure no problem. The upgrading to promises section demonstrates what I was describing. I'm not sure I'd suggest binding a scope value to a promise as described in the last section. It moves more logic into the view and could be more difficult to unit test.

Daniel · Accepted Answer · 2015-02-09 23:59:32Z

1

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.

answered Feb 9, 2015 at 23:59

Daniel

4235 silver badges11 bronze badges

1 Comment

Brad Martin Over a year ago

Okay, I'll admit my understanding of promises is still in its infant stage :( Using angular.copy and then returning the conversations array how does it become accessible in the controller though? I still can't get the view to update properly.

Collectives™ on Stack Overflow

Bind factory data to angularjs controller

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related