包含 http get 调用的 Angular 服务无法与 ng-repeat 一起使用 [英] Angular service containing http get call not working with ng-repeat

问题描述

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

I have an angular controller that calls a service. The service is responsible for returning data from a json file.

控制器:

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 元素为空.在同一个服务中，如果我只是将记录到控制台的相同数据返回硬编码(在成功函数之外，当然它工作得很好.

In the success function I can see the data returned in the console log but if I try to return the data the ng-repeat ul element on my page is empty. In the same service if I simply return the same data logged to the console hard coded (outside of the success function, of course it works just fine.

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

How can I return the data into the ng-repeat using my ajax call?

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

I'm just as new to Plunker as I am Angular but here is my attempt at a Plunk: http://plnkr.co/edit/ALa9q6

推荐答案

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

$http is asynchronous, therefore the call to getProjects will return nothing. Using $q you can receive an instance to a promise which will receive the data when available.

使用 $q

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

Here an example using $q: http://plnkr.co/edit/U72oJblvrVEgYt2mTmU2?p=preview

使用 $resource

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

Alternatively, you can use $resource especially if your server code is RESTful, which requires adding the following dependency in your scripts: //ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.js

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

This is a 1st review of your code to use $resource: http://plnkr.co/edit/tLOAaXZHdGgWOok3Sdc8?p=preview

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

But you can simplify and shrink it more to this: 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

Find more information about $resource here: http://docs.angularjs.org/api/ngResource.$resource

这篇关于包含 http get 调用的 Angular 服务无法与 ng-repeat 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！