Question

我有一个调用服务的角度控制器。该服务负责从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"

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

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

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

Answer 1

你需要使用$ q。示例是here

Answer 2

$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

Answer 3

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

使用$ 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。$资源

Answer 4

如果要在页面之前加载数据加载后你可以使用'resolve'属性对于模块。详细了解文档。

包含http get调用的Angular服务不能与ng-repeat一起使用

4 个答案: