为什么我的服务不退货

Question

我正在使用Ionic Framework 7 AngularJS构建应用程序

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 1.2.4
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID: LinuxMint Description:  Linux Mint 17.1 Rebecca 
Node Version: v0.12.2

我正在构建的页面检索教堂服务列表，并将其显示在主详细信息列表中。 因此，我按照以下代码将$ http代码放入Service中：

services.js：

.service('ServicesService', ['$http', '$sce', function($http, $sce){

var services = [];

$http.get('http://demo0194057.mockable.io/services').then(function(response) {
        services = response.data;
        window.q = services; //checking value of services var

}, function(error) {
    console.error("Error loading Services Endpoint! " + error);
});

return {
    getAllServices: function() {
        console.log('from inside return obj ' + services);
        window.p = services; // checking value of services var
           return services;
    }

}

}])

controller.js：

.controller('servicesCtrl', function($scope, $http, ServicesService, InfoService) {
$scope.services = [];

$scope.services = ServicesService.getAllServices();
window.r = $scope.services;

 $scope.doRefresh = function() {
                $http.get('http://demo0194057.mockable.io/services').success(function(response) {
                $scope.services = response;
            })
            .finally(function() {
                // stop the ion-refresher from spinning
                $scope.$broadcast('scroll.refreshComplete');
            });
            }


})

所以我的问题是该服务正在返回一个空数组，而不是来自JSON REST API的对象数组。 我在代码中放入了一些调试变量，我可以从控制器看到服务正在返回一个空数组（var window.r）。 在服务中，window.p也为空，但是window.q具有正确的对象数据，这意味着API调用可以正常工作。 我无法弄清楚这些数据在哪里丢失了，以致没有从服务中成功返回。

请帮忙

Answer 1

在您的服务中，您需要在getAllServices方法的主体内执行$http.get请求。 否则，在控制器对getAllServices进行调用之后，将执行get请求的then子句，这就是为什么此时未初始化services变量的原因。

Answer 2

尝试这样：

服务

.service('ServicesService', ['$http', '$sce', function($http, $sce){
    var services = [];

    return {
        getAllServices: function() {
            return $http.get('http://demo0194057.mockable.io/services').then(function(response) {
                    services = response.data;
                    return services;
            }, function(error) {
                console.error("Error loading Services Endpoint! " + error);
            });
        }

    }
}]);

控制者

.controller('servicesCtrl', function($scope, $http, ServicesService, InfoService) {
    $scope.services = [];
    $scope.doRefresh = function() {
        ServicesService.getAllServices().then(function (response) {
            $scope.services = response;
        });
    });
});

Answer 3

$http.get('http://demo0194057.mockable.io/services').then(function(response) {
        services = response.data;
        window.q = services; //checking value of services var

}, function(error) {
    console.error("Error loading Services Endpoint! " + error);
});

这是异步功能。 因此，services = response.data将在稍后的时间执行。

$ scope.services = ServicesService.getAllServices（）; 这将在angular上升之后并且可能在异步执行之前被调用。

所以。 如果您不想获得服务，则必须包装ServicesService.getAllServices（）;。 作为保证，您将在其中等待您的第一个请求。 但是似乎存在一些体系结构问题...尝试将您的代码移开一段时间，然后重新分配它。