将工厂数据绑定到 angularjs 控制器

Question

如何在下面的控制器中将数组（对话）绑定到 ng-repeat。我试过将它绑定到一个函数中，目的是在控制器加载时运行然后将数据绑定到视图。

感谢任何帮助。

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

控制器：

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

UserMessages.getMessages();
});

这不是语法问题，因为正在返回数据并且我已经在控制台中成功记录了它，只是不知道如何将它呈现到视图中。

我试过：

    $scope.msgs = UsersMessages.getMessages();

但运气不好。

更新-答案

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

});

Answer 1

您需要 return 服务中 $http 调用的承诺，并在您的控制器中将 a.then 处理程序添加到服务方法调用。在 then 处理程序中更新您的范围属性 FTW

Answer 2

这里有几个问题，主要是由于误解了异步函数在 javascript 中的工作方式。

本部分：

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

您实际上并没有从 getConversations 调用中 returning 对话，因为匿名函数中的代码是异步执行的。相反，您从该调用中 returning null。

为了简化这一点，您可以执行以下操作：

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

它所做的是 return 对话对象（未填充），但是一旦 http 请求返回就会填充它——使用 angular.copy 可以避免更改引用，否则如果您只是使用'=' 运算符。

将工厂数据绑定到 angularjs 控制器

Bind factory data to angularjs controller

angularjs

angularjs-scope

angularjs-factory