在角度控制器中访问 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，网页将不显示任何数据：
<div ng-controller="Ctrl">Controller: {{foo}}</div>
但是，如果我在Ctrl 中更改为$scope.foo = mainInfo，则网页将正确显示JSON 数据。

我可以知道在Ctrl 控制器中访问mainInfo.content 属性的正确方法是什么吗？

之所以需要访问 JSON 属性是因为我需要对数据进行预处理。我打算在图表中使用这些数据，如下面的控制器。目前这个控制器也不起作用，因为我在访问 JSON 属性时遇到了与Ctrl 控制器中相同的问题。

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"
    }
    ]
}

关于工厂-控制器通信，我只是参考另一个帖子的解决方案：reference

Answer 1

$http.get 返回一个承诺——您的问题是您立即返回“obj”，并且您的控制器尝试在 $http.get 承诺解决之前访问数据。

像这样使用 $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;
    });
}) ;

Answer 2

试试这个

var obj = {content: []};
obj.$promise = $http.get('http://localhost/test.php').then(function(response) {
    angular.copy(response.data.records, obj.content);
    return response.data;
});
return obj;

您之前的方法不起作用的原因是因为您重新分配了obj 的content 属性，从而破坏了之前的所有引用。

这也是使用$scope.foo = mainInfo 有效的原因，因为对obj 的引用（通过mainInfo）被保留了。

使用angular.copy 在填充数据的同时维护先前的引用。

---

这应该注意模板中的引用，这些引用会在 $http 承诺解决时更新（由于 $http 触发 digest 循环）。要访问控制器中的数据，请使用 $promise 属性

$scope.foo = mainInfo.content;
mainInfo.$promise.then(function(data) {
    // access data.records here
});

---

如果您与多个消费者（例如控制器）共享您的工厂，那么维护工厂内部的数据是一个好主意。他们可能都引用了mainInfo.content 和mainInfo.$promise，并且都将访问同一个数据集。

Answer 3

试试这个：

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

app.factory('mainInfo', function($http) { 
    return {
        getData: function() {
            var deferred = $q.defer();


            //the php will return json data below
            $http.get('http://localhost/test.php').success(function(response){ 
                deferred.resolve(response.records);});



            return deferred.promise;
        }
    }
});


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