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

Question

我定义了一个 json 文件，我正在尝试加载我的一个 Controller 。我正在使用工厂来获取数据:

.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 ;
      });
        }
    }
})

稍后在我的 Controller 中，我在 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 就是“未定义的”。

我尝试的是在 $scope.loadData() 调用之前定义 $scope.myData(请参阅代码中的注释)。不幸的是，这个简单的变量声明让我的应用程序完全卡住。我还没有找到原因。另外，我不确定这是否与我的整体问题有关。

所以我错过了什么？为什么我不能将我的“http get”结果存储在我的 Controller 的 $scope 中？

编辑:所以在我的例子中，我需要在当前 Controller 被使用之前就存在数据。将 Controller 内执行的所有代码放入 promise 的 .then 链是否是一个合法的选择？

Answer 1

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

基本上发生的事情是，当您的 QuizCtrl Controller 加载时，它会在完成 http 请求之前完成语句 $scope.another_var = $scope.myData; getAllData()。你得到的是一个 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();

希望这对您有所帮助。