Ресурс AngularJS - заполнять данные области внутри контроллера

Question

Я хочу позвонить в службу поддержки, которую у меня есть, и заполнить данные в моем контроллере, чтобы я мог заполнять данные на карте JVector. Есть хороший шанс, что я принимаю неправильный подход (возможно, следует использовать директиву). Я знаю, что служба работает нормально, и я возвращаю данные, которые ожидаю. Однако, когда я проверяю данные в json через console.log, я становлюсь неопределенным. Я считаю, что это потому, что я просто возвращаю обещание, и данные фактически не заполняются, пока я не буду показывать его на странице. Я, скорее всего, что-то не так.

Любые предложения были бы весьма полезными.

Модуль:

var app = angular.module('app', ['ngResource']). 
     factory('mapDataSvc', function ($resource) { 
      return $resource('api/sites', {}); 
     }); 

Контроллер:

var mapCtrl = function ($scope, mapDataSvc) { 
    //http://coder1.com/articles/consuming-rest-services-angularjs 
    $scope.mapData = {}; 

    mapDataSvc.query(function (response) { 
     // Assign the response INSIDE the callback 
     $scope.mapData = response; 
    }); 

//I see the sites array in this log output 
console.log($scope.mapData); 

//This is showing undefined. 
    console.log($scope.mapData.Sites); 

} 

Пример JSON:

{ 
    Sites: [{ 
     VendorName: "MyVendor", 
     SystemHardwareId: 111111, 
     Longitude: 45.22, 
     Longitude: -71.0418 
    }] 
} 

Answer 1

Кажется, что ваш console.log выполняется перед MapData инициализируется внутри mapDataSvc.query. Попробуйте переместить его в mapDataSvc.query так:

var mapCtrl = function ($scope, mapDataSvc) { 
//http://coder1.com/articles/consuming-rest-services-angularjs 
$scope.mapData = {}; 

mapDataSvc.query(function (response) { 
    // Assign the response INSIDE the callback 
    $scope.mapData = response; 

    //I see the sites array in this log output 
    console.log($scope.mapData); 

    //Should be not undefined. 
    console.log($scope.mapData.Sites); 
}); 

}