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

您需要从服务中的$ http调用返回promise，并在控制器中向服务方法调用添加a.then处理程序。在then处理程序中更新范围属性FTW

Answer 2

这里有一些问题，主要源于对异步函数在javascript中如何工作的误解。

在这部分：

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

您实际上没有从getConversations调用返回对话，因为匿名函数中的代码是异步执行的。相反，您将从该调用返回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;
 }

这样做是返回会话对象（未填充），但是一旦http请求返回填充它 - 使用angular.copy避免更改引用，否则如果您刚使用'='运算符则会发生这种情况。

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

2 个答案: