javascript - Angularjs 在初始 json 后加载

Question

我需要在信息可用之前获取信息。我有一个变量 var myId。我需要这个变量来传递 myapp.run()我有 2 个 Controller 用于 2 个不同的页面。

var myId; // I need this variable
afroEarthApp.controller('afroEarthMainCtrl',['$scope','$http','$location','$cookies', '$rootScope', function($scope, $http, $location, $cookies, $rootScope) {
    $http.get('js/afro.json').success(function(data) {
        $scope.myDataFirst = data;
        $scope.singleNiche = $scope.myDataFirst.US;
        $rootScope.header = $scope.singleNiche;
        $rootScope.myDataVar = $scope.myDataFirst.US;
    });
    $scope.setCountry = function (choise) {
        switch (choise){
            case "US" : $scope.singleNiche = $scope.myDataFirst.US;
                break;
            case "UK" : $scope.singleNiche = $scope.myDataFirst.UK;
                break;
            case "SA" : $scope.singleNiche = $scope.myDataFirst.SA;
                break;
            case "CAN" : $scope.singleNiche = $scope.myDataFirst.CAN;
                break;
            case "AU" : $scope.singleNiche = $scope.myDataFirst.AU;
                break;
        }
        $cookies.put("myCountry", choise);
        $rootScope.header = $scope.singleNiche;
    };
    $rootScope.bodylayout = "home-page";
    myId = $scope.singleNiche // here
}]);
afroEarthApp.controller('SingleCtrl',['$scope','$http', '$location', '$routeParams', 'Single', '$cookies', '$rootScope', function($scope, $http, $location, $routeParams, Single, $cookies, $rootScope) {
  $scope.niche = $routeParams.niche;
    $rootScope.bodylayout = "single-page";
    var url = 'sites/'+$routeParams.niche+'.json';
    Single.get({niche: $routeParams.niche}, function (data) {
        $scope.singleFirst = data;
        $scope.singleNiche = $scope.singleFirst.US;
        var getCountry = String($cookies.get("myCountry"));
        $scope.setCountry = function (choice) {
            switch (choice) {
                case "US" :
                    $scope.singleNiche = $scope.singleFirst.US;
                    break;
                case "UK" :
                    $scope.singleNiche = $scope.singleFirst.UK;
                    break;
                case "SA" :
                    $scope.singleNiche = $scope.singleFirst.SA;
                    break;
                case "CAN" :
                    $scope.singleNiche = $scope.singleFirst.CAN;
                    break;
                case "AU" :
                    $scope.singleNiche = $scope.singleFirst.AU;
                    break;
            }
            $rootScope.header = $scope.singleNiche;
        }
        $scope.setCountry(getCountry);

    })
    $rootScope.header = $scope.singleNiche;
    myId = $scope.singleNiche; // here
}]);
afroEarthApp.run(function ($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
       ...some code...
       console.log(myId) // undefined
       console.log(myId.id) // undefined
       ...some code...
    });
});

你能帮帮我吗

Answer 1

我不明白问题出在哪里，$scope.myDataFirst = data; 设置在 $http.get() 中，因为这是一个异步调用，所以不会立即设置data。

但 Javascript 引擎不会等待 异步 调用完成，因此 $scope.myDataFirst.US; 会抛出错误，进而将未定义的值设置为 myId = $scope.singleNiche//这里。

---

解决方案:

• 将所有代码移动到 success 回调中，如下所示。
• 您还没有在代码中处理错误处理流程，这在使用 ajax 调用时是必不可少的

JS 代码:

$http.get('js/afro.json').then(
   successHandler,
   errorHandler
);

function successHandler(data){
   $scope.myDataFirst = data;
   $scope.singleNiche = $scope.myDataFirst.US;
   $rootScope.header = $scope.singleNiche;
   $rootScope.myDataVar = $scope.myDataFirst.US;

   $scope.setCountry = function (choise) {
      switch (choise){
        case "US" : $scope.singleNiche = $scope.myDataFirst.US;
            break;
        case "UK" : $scope.singleNiche = $scope.myDataFirst.UK;
            break;
        case "SA" : $scope.singleNiche = $scope.myDataFirst.SA;
            break;
        case "CAN" : $scope.singleNiche = $scope.myDataFirst.CAN;
            break;
        case "AU" : $scope.singleNiche = $scope.myDataFirst.AU;
            break;
     }
     $cookies.put("myCountry", choise);
     $rootScope.header = $scope.singleNiche;
  };
    $rootScope.bodylayout = "home-page";
    myId = $scope.singleNiche;
}

function errorHandler(error){
   //show error message when async call fails.
}