AngularJS доступ за пределами $ http

Question

Могу ли я знать, почему я не могу получить доступ к $scope.auditorium вне метода $http, но я могу получить доступ к другому $http (например, $scope.exhibition) в другом $http ($scope.auditorium).Конкатенация 2 области в конце через $scope.combine

Код:

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

              //Display auditoriums information
              $http({
                  method: 'GET',
                  url:'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                  }).then(function successCallback(response) {
                    $scope.auditoriums = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });



              //Display exhibitions information
              $http({
                        method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                        }).then(function successCallback(response) {
                            $scope.exhibitions = response.data.SrchResults;
                    $scope.exhibitions.splice(0,1);
                        }, function errorCallback(response) {
                            console.log(response);
                        });

                    $scope.combine = $scope.exhibitions.concat($scope.auditoriums, $scope.hotels);
                    console.log($scope.combine);
      }]);

Я не могу получить доступ к $ scope.combine, он ничего не отображает.Но с другой стороны, если бы я поместил область действия $ внутри $ http, например, так:

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

              //Display auditoriums information
              $http({
                  method: 'GET',
                  url:'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                  }).then(function successCallback(response) {
                    $scope.auditoriums = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });


              //Display exhibitions information
              $http({
                        method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                        }).then(function successCallback(response) {
                            $scope.exhibitions = response.data.SrchResults;
                    $scope.exhibitions.splice(0,1);
                $scope.combine = $scope.exhibitions.concat($scope.auditoriums, $scope.hotels);
                console.log($scope.combine);
                        }, function errorCallback(response) {
                            console.log(response);
                        });



      }]);

Пожалуйста, простите меня, если вопрос глуп, я все еще довольно плохо знаком с AngularJS.Спасибо за помощь!

Answer 1

Служба $http будет работать асинхронно, в то время как ваше объявление $scope.combine будет запускать синхронизацию и будет установлено до завершения асинхронных операций.Вот почему значения пусты.

Один из способов решить эту проблему - дождаться завершения всех асинхронных операций.

Вот пример

myApp.controller('displayCatController', ['$scope','$http','$q', function($scope, $http, $q){

              //Display auditoriums information
              var promise1 = $http({
                  method: 'GET',
                  url:'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                  }).then(function successCallback(response) {
                    $scope.auditoriums = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });


              //Display exhibitions information
              var promise2 =$http({
                        method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                        }).then(function successCallback(response) {
                            $scope.exhibitions = response.data.SrchResults;
                            $scope.exhibitions.splice(0,1);
                        }, function errorCallback(response) {
                            console.log(response);
                        });


            $q.all([promise1, promise2]).then(function(){
                $scope.combine = $scope.exhibitions.concat($scope.auditoriums, $scope.hotels);
                console.log($scope.combine);
            });

}]);