包含 http get 调用的 Angular 服务不适用于 ng-repeat答案

【问题标题】：Angular service containing http get call not working with ng-repeat包含 http get 调用的 Angular 服务不适用于 ng-repeat
【发布时间】：2013-11-22 05:01:18
【问题描述】：

我有一个调用服务的角度控制器。该服务负责从 json 文件返回数据。

控制器：

function projectController($scope, ajaxServices) {
$scope.projects = ajaxServices.getProjects();
}

服务：

projectManagerApp.factory('ajaxServices', function ($http) {
  return {
    getProjects : function () {
      $http.get('projects.json', { data: {} }).success(function (data) {
      if (window.console && console.log) {
        console.log("objects returned: " + data.length); // shows # of items
      }  
      return data   //nothing ng-repeated, no console errors.
    })
    // Exact same data from json file hard-coded, works fine
    // when not commented out.
    // return [{ "id": 1, "name": "Project 1 }, { "id": 2, "name": "Project 2" }]
    }
   }
});

html:ng-repeat="project in projects"

在成功函数中，我可以看到控制台日志中返回的数据，但如果我尝试返回数据，我页面上的 ng-repeat ul 元素为空。在同一个服务中，如果我只是将相同的数据返回到硬编码的控制台（在成功函数之外，当然它工作得很好。

如何使用我的 ajax 调用将数据返回到 ng-repeat？

我对 Plunker 和 Angular 一样陌生，但这是我对 Plunk 的尝试： http://plnkr.co/edit/ALa9q6

【问题讨论】：

标签： http angularjs get

【解决方案1】：

$http 是异步的，因此对getProjects 的调用不会返回任何内容。使用$q，您可以接收到一个promise 的实例，该实例将在可用时接收数据。

使用 $q

这里是使用$q 的示例： http://plnkr.co/edit/U72oJblvrVEgYt2mTmU2?p=preview

使用 $resource

或者，您可以使用$resource，尤其是当您的服务器代码是 RESTful 时，这需要在您的脚本中添加以下依赖项： //ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.js

这是您使用$resource的代码的第一次审查：http://plnkr.co/edit/tLOAaXZHdGgWOok3Sdc8?p=preview

但是您可以将其进一步简化和缩小为： http://plnkr.co/edit/pKO6k6GxJ1RlO8SNvqUo?p=preview

这是新的app.js 文件：

angular.module('app',  ['ngResource'])
  .factory('ProjectsService', ['$resource', function($resource) {
    return $resource('projects.json');
  }])
  .controller('ProjectsController', ['ProjectsService', '$scope', function(ProjectsService, $scope) {
    $scope.projects = ProjectsService.query();
  }]);

在此处查找有关$resource 的更多信息： http://docs.angularjs.org/api/ngResource.$resource

【讨论】：

针对这个问题发布了许多很好的答案，但我发现您的答案中的“使用 Q”对我的情况最有用。我编写了一个 asmx Web 服务来完全返回 json 文件中的数据，从表面上看，它将字符串直接写入 http 响应。我不知道这是否会被视为“RESTful”服务器代码。不管。很好的答案感谢您的帮助。

【解决方案2】：

你需要使用 $q。例如here

【讨论】：

【解决方案3】：

$http 异步执行，可能会或可能不会在任何给定时间点完成，这就是您的 return 语句不起作用的原因。

使用$q 或简单地处理控制器内部的承诺：

服务：

projectManagerApp.factory('ajaxServices', function ($http) {
    return {
         getProjects : function () {
            return $http.get('projects.json', { data: {} })           
        }
    }       
});

控制器：

function projectController($scope, ajaxServices) {
    ajaxServices.getProjects().success(function (data) {
        if (window.console && console.log) {
            console.log("objects returned: " + data.length);
        }                          
        $scope.projects = data
    });
}

Plunk

【讨论】：

【解决方案4】：

如果您希望在页面之前加载数据已加载，您可以使用 'resolve' 属性对于模块。详情请查看文档。

【讨论】：