javascript - Angularjs PHP $http 并用数据填充 Controller 中的 $scope

Question

好的，我们开始吧。我有一个 angularjs 平台，我想从外部 php 文件调用 Controller 范围内的数据。这是原始代码。

.controller("morrisChartCtrl", ["$scope",
        function ($scope) {
            return $scope.mainData = [{
                month: "2013-01",
                xbox: 294e3,
                will: 136e3,
                playstation: 244e3
            }, {
                month: "2013-02",
                xbox: 228e3,
                will: 335e3,
                playstation: 127e3
            }, {
                month: "2013-03",
                xbox: 199e3,
                will: 159e3,
                playstation: 13e4
            }, {
                month: "2013-04",
                xbox: 174e3,
                will: 16e4,
                playstation: 82e3
            }, {
                month: "2013-05",
                xbox: 255e3,
                will: 318e3,
                playstation: 82e3
            }, {
                month: "2013-06",
                xbox: 298400,
                will: 401800,
                playstation: 98600
            }, {
                month: "2013-07",
                xbox: 37e4,
                will: 225e3,
                playstation: 159e3
            }, {
                month: "2013-08",
                xbox: 376700,
                will: 303600,
                playstation: 13e4
            }, {
                month: "2013-09",
                xbox: 527800,
                will: 301e3,
                playstation: 119400
            }], $scope.simpleData = [{
                year: "2008",
                value: 20
            }, {
                year: "2009",
                value: 10
            }, {
                year: "2010",
                value: 5
            }, {
                year: "2011",
                value: 5
            }, {
                year: "2012",
                value: 20
            }, {
                year: "2013",
                value: 19
            }], $scope.comboData = [{
                year: "2008",
                a: 20,
                b: 16,
                c: 12
            }, {
                year: "2009",
                a: 10,
                b: 22,
                c: 30
            }, {
                year: "2010",
                a: 5,
                b: 14,
                c: 20
            }, {
                year: "2011",
                a: 5,
                b: 12,
                c: 19
            }, {
                year: "2012",
                a: 20,
                b: 19,
                c: 13
            }, {
                year: "2013",
                a: 28,
                b: 22,
                c: 20
            }], $scope.donutData = [{
                label: "Download Sales",
                value: 12
            }, {
                label: "In-Store Sales",
                value: 30
            }, {
                label: "Mail-Order Sales",
                value: 20
            }, {
                label: "Online Sales",
                value: 19
            }]
        }
    ])

我想使用 $http 从将生成 JSON 格式的单个 php 文件中获取每个范围的代码，而不是 js 文件中的内联数据。

这种格式有什么问题

.controller("morrisChartCtrl", ["$scope",
        function ($scope) {
            return $scope.mainData = $http.get('php/mainData.php').success(function (data) {
    $scope.mainData = data;
}), $scope.simpleData = $http.get('php/simpleData.php').success(function (data) {
    $scope.simpleData = data;
}), $scope.comboData = $http.get('php/comboData.php').success(function (data) {
    $scope.comboData = data;
}), $scope.donutData = $http.get('php/donutData.php').success(function (data) {
    $scope.donutData = data;
})
        }
    ])

只是想找出正确的结构

Answer 1

通过 $http.get() 得到的结果是一个 Promise 对象。避免将 $http.get() 的结果分配给作用域变量。

.controller("morrisChartCtrl", ["$scope",
  function ($scope) {
    var mainDataPromise = $http.get('php/mainData.php');
    mainDataPromise.success(function (data) {
      $scope.mainData = data;
    }); 

    var simpleDataPromise = $http.get('php/simpleData.php');
    simpleDataPromise.success(function (data) {
      $scope.simpleData = data;
    });

    var comboDataPromise = $http.get('php/comboData.php');
    comboDataPromise.success(function (data) {
      $scope.comboData = data;
    })

    var donutDataPromise = $http.get('php/donutData.php');
    donutDataPromise.success(function (data) {
      $scope.donutData = data;
    });
  }
])