包含http get调用的Angular服务无法使用ng repeat

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

控制器：

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

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

服务：

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=“项目中的项目”

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

如何使用ajax调用将数据返回到ng repeat中

我对Plunk和我一样陌生，但这里是我对Plunk的尝试：

---

您需要使用$q。例如，

异步执行，可能在任何给定的时间点完成，也可能不完成，这就是返回语句不起作用的原因

使用

$q

或简单地在控制器内处理承诺：

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

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

服务：

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

控制器：

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

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

---

$http

是异步的，因此对

getProjects

的调用将不返回任何内容。使用

$q

您可以接收promise的实例，该实例将在可用时接收数据

使用$q

下面是使用

$q

的示例：

使用$resource

或者，您可以使用

$resource

，尤其是在服务器代码是RESTful的情况下，这需要在脚本中添加以下依赖项：

//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular resource.js

这是要使用

$resource

的代码的第一次审阅：

但您可以将其简化并缩小到以下程度：

这是新的

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

的更多信息：

---

.$resource

如果希望在页面之前加载数据 已加载。您可以使用“resolve”属性 对于模块。

---

查看文档了解详细信息。

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