1

我正在开发一个小型 AngularJS 应用程序，目前正在努力创建服务。

我有一个服务作为提供联系人（姓名，地址......）的后端。到目前为止，它们在服务 ( instance.contacts=[...]) 中被硬编码为数组，但现在我正试图从 json 文件中读取它们：

myModule.factory('contactService', ['$http',function ($http) {
    var instance = {};

    $http.get('contacts.json').success(function (data) {
        instance.contacts = data;
    });

    return instance;
}]);

我在浏览器控制台中看到文件已成功读取，但我在屏幕上看不到任何更改。

所以我尝试了以下方法，它起作用了：

myModule.factory('contactService', ['$http',function ($http) {
    var instance = {
        contacts:[]
    };

    $http.get('contacts.json').success(function (data) {
        angular.forEach(data, function(item) {
            instance.contacts.push(item);
        });
    });

    return instance;
}]);

我不知道为什么第二个代码片段有效，而不是第一个。有人可以帮我理解吗？

4

3 回答 3

4

$http是异步的，所以你不能返回一个数组，因为当你返回它时，它可能还没有任何数据。您实际上必须返回承诺：

var instance = $http('contacts.json');

return instance;

然后在您的控制器（或其他服务）中：

contactService.then(function(response) {
  $scope.contacts = response.data;
});

请记住，无论您在何处访问您的服务，都必须使用then.

于 2013-03-01T18:12:33.280 回答
0

使用 可能会更好ngResource，在这种情况下，您的代码应如下所示：

myModule.factory('contactService', function ($resource) {
    return $resource('contacts.json', {}, {
        get: {method: 'GET', isArray: true}
    });
})

确保 myModulengResource在其依赖项列表中。然后在您的控制器中，您可以使用contactService.get()

于 2013-03-01T18:12:34.400 回答
0

举一个完整的例子，这里是 plunker http://plnkr.co/edit/VsuAKNavPbHL7RWbrvKD?p=preview。随后的想法与 Josh David Miller 提到的相同。

于 2013-03-01T19:21:59.600 回答