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

时间:2017-07-03 10:10:19

标签: javascript angularjs json

我有一个工厂从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;
}

那个控制器

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"时,它不起作用

1 个答案:

答案 0 :(得分:1)

您没有从getList函数返回任何内容。理想情况下,它应该为您的案例返回promise

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

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

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