Я создаю приложение с использованием 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 в Сервис в соответствии со следующим кодом:
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 работает нормально. Я не могу понять, где эти данные теряются, так что они не будут успешно возвращены из службы.
Пожалуйста помоги
попробуйте:
обслуживание
.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;
});
});
});
В вашем сервисе вам нужно выполнить запрос $http.get
внутри тела метода getAllServices
. В противном случае предложение get request then будет выполняться после вызова getAllServices
с помощью контроллера, поэтому переменная 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);
});
Это асинхронная функция. Таким образом, службы = response.data будут выполняться через некоторое время.
$ scope.services = ServicesService.getAllServices(); Это будет вызов сразу после того, как угловой повысится и, вероятно, до того, как ваш асинк будет запущен.
Так. Если вы захотите получить свои услуги, вы должны обернуть свой ServiceService.getAllServices(); как обещание, где вы будете ждать свой первый запрос. Но, похоже, есть некоторые проблемы с архитектурой... Попробуйте немного отодвинуть свой код и переделать его.