javascript – 无法将http结果保存到范围

我有一个json文件定义,我试图加载我的一个控制器.我正在使用工厂来获取数据：

.factory('myService', function($http) {

  var all_data = [];

    return {
      getAllData: function(){
        return $http.get('js/data/all_data.json').then(function(data) {
          all_data  = data;
          return all_data ;
      });
        }
    }
})

稍后在我的控制器中,我在loadData()函数中调用getAllData()：

.controller('QuizCtrl',['$scope','$state','$http','myService',function($scope,$state,$http,myService){

    // $scope.myData = []; <-- this makes the app freeze and not respond anymore
    $scope.loadData = function(){
      myService.getAllData().then(function(all_data){
          $scope.myData = all_data.data.all_data;
          alert($scope.myData);
      });
    }

    $scope.loadData();
    $scope.another_var = $scope.myData;

}])

正如您首先看到的,我也在调用loadData().在函数内部调试时(请参阅alert()),我可以清楚地看到如何加载json并将其应用于$scope.myData变量.

一旦我尝试将变量分配给另一个变量(参见$scope.another_var),myData就是’undefined’.

我尝试的是在$scope.loadData()调用之前定义$scope.myData(参见代码中的注释).不幸的是,这个简单的变量声明使我的应用完全冻结.我还没有找到原因.另外,我不确定它是否与我的整体问题有关.

那么我错过了什么？为什么我无法将“http get”结果存储在我的控制器的$scope中？

编辑：所以在我的情况下,我需要在当前控制器使用之前存在数据.将所有在控制器中执行的代码放入承诺的.then链中是否合法？

解决方法:

这是因为您的HTTP请求是异步函数,而赋值$scope.another_var = $scope.myData;是同步的.

基本上发生了什么,当你的QuizCtrl控制器被加载时,它完成语句$scope.another_var = $scope.myData;在它完成getAllData()的http请求之前.你得到的是一个race condition.

如果要更改another_var的值,请在异步回调中移动它：

$scope.loadData = function(){
      myService.getAllData().then(function(all_data){
          $scope.myData = all_data.data.all_data;
          alert($scope.myData);

          // because now $scope.myData is available this assignment will work:
          $scope.another_var = $scope.myData;
      });
    }

$scope.loadData();

希望这可以帮助.

标签：http-get,javascript,angularjs,json,angularjs-scope
来源： https://codeday.me/bug/20190828/1755387.html