Как заполнить переменные углового контроллера из массива, который возвращается с помощью $ http.get

Question

Использование Angular 1.5.9 для интерфейса и WebAPI 2 на сервере. Вызов стандарта $http.get в услуге Get() метод на контроллере. Это возвращает ViewModel, который я хочу заполнить переменными с помощью углового контроллера.

var carListController = function ($http, $scope, carService) { 

    var model = this; 

    model.carList = carService.getCarsByMake('Bentley', 10); 

    console.log(model.carList); 

    model.cars = model.carList[0].cars; 

    model.totalCars = model.carList[0].totalCars; 

    model.numberOfPages = model.carList[0].numberOfPages; 

}; 

Я получаю ошибку "Cannot read property 'cars' of undefined":

Как вы можете видеть console.log является показывая model.carList так что я знаю, проблема в коде контроллера заселять другие переменные. Что мне здесь не хватает? Любая помощь обходится.

Edit: CarService

var cars = []; 

var carService = function ($http) { 

    var getCarsByMake = function (make, size) { 

     $http.get('http://localhost:50604/api/cars?make=' + make + '&size=' + size) 
      .then(function (response) { 
       // Success 
       angular.copy(response.data, cars); 
      }, function() { 
       // Failure 
      }); 

     return cars; 
    }; 

    return { 
     getCarsByMake: getCarsByMake 
    }; 
}; 

Answer 1

Вы должны обернуть $scope переменной населения в посыла подходе. Поскольку данные model.carList еще не загружены, когда происходит популяция, это нормально, что ошибка возникает (невозможно прочитать свойства «автомобили» неопределенного значения, что означает, что carList не определен).

В вашей службе carService.getCarsByMake вы должны вернуть (метод $http.get) promise

Только когда обещание будет решена, вы можете заполнить ваши $scope переменные с этими данными.

var carListController = function ($http, $scope, carService) {  
    var model = this;  
    carService.getCarsByMake('Bentley', 10).then(function(response){ 
     model.carList = response.data; 
     model.cars = model.carList.cars; 
     model.totalCars = model.carList.totalCars; 
     model.numberOfPages = model.carList.numberOfPages; 
    });  

}; 

Возвращение $http запрос на стороне службы:

var cars = []; 
var carService = function ($http) { 
    var getCarsByMake = function (make, size) { 
     return $http.get('http://localhost:50604/api/cars?make=' + make + '&size=' + size); 
    }; 

    return { 
     getCarsByMake: getCarsByMake 
    }; 
};