Angularjs在初始json之后加载

时间:2016-04-04 08:20:22

标签: javascript angularjs json

我需要在信息可用之前获取信息。我有一个变种var myId。我需要这个变量来传递myapp.run() 我有两个不同页面的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...
    });
});

你能帮助我吗?

1 个答案:

答案 0 :(得分:3)

我不明白问题是什么,$scope.myDataFirst = data;设置在$http.get()&由于这是异步调用,因此不会立即设置data

但是Javascript引擎不会等待asynchronous调用完成,因此$scope.myDataFirst.US;会抛出错误,而错误会将未定义的值设置为myId = $scope.singleNiche // here

解决方案:

  • 将所有代码移至success回调中,如下所示。
  • 您尚未处理代码中的错误处理流程,这在使用ajax来电时非常重要

JS CODE:

$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.
}