AngularJS ui-router解析未定義

Question

我已經從使用ngRoute轉移到ui-router。我試圖解決在控制器中使用的路由中的Factory調用，但在輸出到控制檯時未定義。這裏是工廠：

'use strict'; 

angular.module('angular10App') 

.factory('AirportService', function ($http) { 

return { 

    getAirports: function() { 

     var airports = $http.get('../json/airports.json') 
      .then(function (response) { 

       console.log(response.data); //Outputs an array of objects 

       return response.data; 
      }); 
    } 
}); 

這裏是路線：

'use strict'; 

angular.module('angular10App') 
    .config(function ($stateProvider) { 
    $stateProvider 
     .state('selectFlights', { 
      url: '/select_flights', 
      templateUrl: 'app/selectFlights/selectFlights.html', 
      controller: 'SelectFlightsCtrl', 
      resolve: { 

       AirportService: 'AirportService', 

       airports: function (AirportService) { 
        return AirportService.getAirports(); 
       } 
      }, 
     }); 
    }); 

，這裏是控制器：

'use strict'; 
angular.module('angular10App') 
.controller('SelectFlightsCtrl', function ($scope, airports) { 

$scope.selectedAirport = null; 

    $scope.airports = airports; 
    console.log($scope.airports); //undefined 
}); 

Answer 1

試着改變你的決心塊這樣的：

resolve: { 
    airports: function (AirportService) { 
     return AirportService.getAirports(); 
    } 
} 

並修改getAirPorts功能分爲：

function getAirports() { 
    // You need to return the $http promise (or in your case, 'var airports'); 
    return $http.get('../json/airports.json') 
    .then(function (response) { 
     console.log(response.data); //Outputs an array of objects 
     return response.data; 
    });   
}