javascript - 无法在 Angular 中将 json 文件调用到工厂中

Question

我有一个工厂，它从 Json 文件加载数据以进行 ng-repeat，但是当我使用 ng-repeat 时它无法工作

那是我的工厂

quizApp.factory("DataService", dataService);
function dataService($http) {
var dataObj = {
    mainInfo: null,
    getList: getList()
}

function getList() {
$http.get('data/list.json').then(function (myData) {
    return myData.data.listInfo;

});
}
  return dataObj;
}

以及 Controller

quizApp.controller('listCtrl',function(DataService,$scope,$http){
    $scope.listInfo = dataService.getList;

    $scope.changeActiveInfo =function(index){
        $scope.activeInfo = index;
    }
    $scope.activateQuiz = function (){
    QuizMetrics.changState("quiz", true);
    }
});

我的 json 文件

{
    "listInfo": [{
        "type": "Green Turtle",
        "image_url": "http://www.what-do-turtles-eat.com/wp-
        content/uploads/2014/10/Sea-Turtles-Habitat.jpg",
        "locations": "Tropical and subtropical oceans worldwide",
        "size": "Up to 1.5m and up to 300kg",
        "lifespan": "Over 80 years",
        "diet": "Herbivore",
        "description": "The green turtle is a large, weighty sea turtle with a wide, smooth carapace, or shell. It inhabits tropical and subtropical coastal waters around the world and has been observed clambering onto land to sunbathe. It is named not for the color of its shell, which is normally brown or olive depending on its habitat, but for the greenish color of its skin. There are two types of green turtles—scientists are currently debating whether they are subspecies or separate species—including the Atlantic green turtle, normally found off the shores of Europe and North America, and the Eastern Pacific green turtle, which has been found in coastal waters from Alaska to Chile."
},
{
    "type": "Loggerhead Turtle",
    "image_url": "http://i.telegraph.co.uk/multimedia/archive/02651/loggerheadTurtle_2651448b.jpg",
    "locations": "Tropical and subtropical oceans worldwide",
    "size": "90cm, 115kg",
    "lifespan": "More than 50 years",
    "diet": "Carnivore",
    "description": "Loggerhead turtles are the most abundant of all the marine turtle species in U.S. waters. But persistent population declines due to pollution, shrimp trawling, and development in their nesting areas, among other factors, have kept this wide-ranging seagoer on the threatened species list since 1978. Their enormous range encompasses all but the most frigid waters of the world's oceans. They seem to prefer coastal habitats, but often frequent inland water bodies and will travel hundreds of miles out to sea."
}

当我使用ng-repeat="list in listInfo"时它不起作用

Answer 1

您没有从 getList 函数返回任何内容。理想情况下，它应该针对您的情况返回 promise。

getList() {
  return $http.get('data/list.json').then(function (myData) {
    return myData.data.listInfo;
  });
}

然后通过 getList 方法调用 .then 访问数据。

dataService.getList().then(function(list){
   $scope.listInfo = list;
});