Javascript 从Angular的http get reuqest的私有范围公开数据

我是一个棱角分明的新手，正在开发一个应用程序，它可以从会计软件中获取数据，并使用谷歌图表将不同的事物可视化

由于会计软件的api没有按我需要的方式提供数据，我必须在将其传递给google charts api之前对其进行处理

不，我遇到的问题是，我无法访问http get请求函数中返回的数据，因为我猜是范围问题。我试过很多东西，但似乎都不管用。我觉得应该有一个明显的解决办法，但我不能指手画脚

如果有人能帮我找到一种方法来公开http请求数据，使其在http函数之外可用，那就太好了。 下面是一个代码示例：

    myApp.controller("dataFetch", ['$http', '$scope',function($http, $scope){

    var self = this;
    self.project = {};
    self.TSproject;
    self.TShours;


    //PASSING AUTHORIZATION
    var config = { headers: { 'Authorization': 'Bearer 1lFASlwgM3QwSyZfJVJPO6776X5wlZtogdg8RN-Lt',} };

    //GET DATA
    $http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {

        //SAVING PROJECT DATA
        self.project = {
            name: response.data.project.name,
            url: response.data.project.url
        };
        return self.project.url;

    }, function(errResponse) {
        console.error("Get project request failed");
    }).then(function(pUrl) {
        return
        $http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
            self.TSproject = response.data.timeslips[0].project;
            self.TShours = response.data.timeslips[0].hours;
        });

    });
    //GOOGLE CHARTS  
    $scope.data1 = {};
    $scope.data1.dataTable = new google.visualization.DataTable();
    $scope.data1.dataTable.addColumn("string","User")
    $scope.data1.dataTable.addColumn("number","Qty")

    //INSERTING DATA FROM SERVER HERE
    $scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
    $scope.data1.title="Daniels Timeslips";



}]);

---

非常感谢

我认为您应该在上一个http承诺中创建google图表对象

    //GET DATA
    $http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {

        //SAVING PROJECT DATA
        self.project = {
            name: response.data.project.name,
            url: response.data.project.url
        };
        return self.project.url;

    }, function(errResponse) {
        console.error("Get project request failed");
    }).then(function(pUrl) {
        return
        $http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
            self.TSproject = response.data.timeslips[0].project;
            self.TShours = response.data.timeslips[0].hours;

            //GOOGLE CHARTS  
            $scope.data1 = {};
            $scope.data1.dataTable = new google.visualization.DataTable();
            $scope.data1.dataTable.addColumn("string","User")
            $scope.data1.dataTable.addColumn("number","Qty")

            //INSERTING DATA FROM SERVER HERE
            $scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
            $scope.data1.title="Daniels Timeslips";
        });

    });

---

现在，您应该能够在模板{data1}中访问所有信息。

代码的问题是，您甚至在GET调用完成之前就试图初始化图表

尽管看起来$http.get在代码中是第一位的，但它是一个异步操作，所以JS解释器不会等待调用完成。它只需使用$http.get启动AJAX调用，并继续代码中的其余语句，即您的案例中的GoogleCharts初始化

当响应可用时，我们承诺在AJAX调用完成后调用，这是理想情况下应该初始化图表的地方，因为图表依赖于AJAX调用响应

话虽如此，您只需将图表初始化移动到第二个GET请求的回调，就可以实现这一点，如下所示

   $http.get('https://api.freeagent.com/v2/projects/941562', config).then(function(response) {
      // removing your code for brewity
    }, function(errResponse) {
        console.error("Get project request failed");
    }).then(function(pUrl) {

        $http.get('https://api.freeagent.com/v2/timeslips?' + 'from_date=2015-09-21&to_date=2015-09-28' + 'user=' + pUrl, config).then(function(response) {
            self.TSproject = response.data.timeslips[0].project;
            self.TShours = response.data.timeslips[0].hours;

          //GOOGLE CHARTS  
          $scope.data1 = {};
          $scope.data1.dataTable = new google.visualization.DataTable();
          $scope.data1.dataTable.addColumn("string","User")
          $scope.data1.dataTable.addColumn("number","Qty")

          //INSERTING DATA FROM SERVER HERE
          $scope.data1.dataTable.addRow([self.TSproject, self.TShours]);
          $scope.data1.title="Daniels Timeslips";
        });

    });

---

谢谢你的回答！这很有道理。关于这一点，我唯一的问题是：我有第二个带有GoogleChart代码的控制器，需要访问data1对象。由于我现在将整个GoogleCharts数据块移动到http回调中，GoogleCharts调用还能访问这个吗？我认为它不会工作。如果需要在两个控制器之间共享数据，则需要使用自定义服务（如所述）。希望这有帮助：如果我的回答有助于解决您的问题，请投票并接受：