javascript - 在 Angular Controller 中访问 HTTP GET JSON 属性

Question

我正在使用 angular.js 中的工厂和 $http.get 方法来获取和处理 JSON 数据。 JSON 数据似乎已成功解析为工厂，但我对此 JSON 数据的访问属性有问题。

这是我的js代码:

var app = angular.module("app", []);      

app.factory('mainInfo', function($http) { 

    var obj = {content:null};
    //the php will return json data below
    $http.get('http://localhost/test.php').success(function(response){ 
        obj.content = response.records;

    });    

    return obj;    
});


app.controller('Ctrl', function($scope, mainInfo){
    $scope.foo = mainInfo.content;
}) ;

现在，如果我尝试在 Ctrl 内访问 foo controller，网页会显示无数据:
<div ng-controller="Ctrl">Controller: {{foo}}</div>
但是，如果我更改为 $scope.foo = mainInfo在Ctrl , 则网页将正确显示 JSON 数据。

请问访问mainInfo.content的正确方法是什么？属性(property) Ctrl Controller ？

我需要访问 JSON 属性的原因是因为我需要预处理数据。我打算在图表中使用这些数据，如下面的 Controller 所示。目前这个 Controller 也没有工作，因为我在访问 JSON 属性时遇到了与 Ctrl 中相同的问题。 Controller 。

app.controller("LineCtrl", function ($scope, mainInfo) {
    var timePoints = [];
    var percentagePoints = [];
    var i = 0;
    for( i = 0; i < mainInfo.content.length; i ++) {
        timePoints.push(mainInfo.content[i].Time);
        percentagePoints.push(mainInfo.content[i].Percentage);
    }

    $scope.labels = timePoints;

    $scope.data = percentagePoints;

    $scope.onClick = function (points, evt) {
        console.log(points, evt);
    };
});

json数据:

{
"records": [
    {
        "Id": "1",
        "Time": "2015-07-25 08:00:00",
        "Percentage": "60"
    },
    {
        "Id": "2",
        "Time": "2015-07-25 09:00:00",
        "Percentage": "70"
    },
    {
        "Id": "3",
        "Time": "2015-07-25 10:00:00",
        "Percentage": "80"
    }
    ]
}

关于工厂- Controller 通信，我只是引用另一个帖子的解决方案:reference

Answer 1

$http.get 返回一个 promise ——您的问题是您立即返回“obj”，并且您的 Controller 尝试在 $http.get promise 得到解决之前访问数据。

像这样使用 $http(不需要像其他评论中那样使用 $q.defer()):

var app = angular.module("app", []);      

app.factory('mainInfo', function($http) { 
    var getRecordsPromise = $http.get('http://localhost/test.php').then(function(response){ 
        //whatever is returned here will be accessible in the .then that is chained
        return response.data.records;
    });    

    return {
        getRecords: getRecordsPromise
    };    
});


app.controller('Ctrl', function($scope, mainInfo){
    mainInfo.getRecords.then(function (records) {
        $scope.foo = records;
    });
}) ;