Question

我将它注入我的控制器模块：

var services = angular.module('services', []);

services.factory('jsonManager', ['$http', function($http) {

return{
  loadData: loadData
}

function loadData(){
   $http({
     method: 'GET',
     url: 'data/2015_data.json'
}).then(function successCallback(response) {
    return response.data;
  }, function errorCallback(response) {
    return response.err;
  });
}

}]);

......它不起作用！我在这样的控制器上使用它，检查出来：

var ctrls = angular.module('controllers', ['services']);

ctrls.controller('overviewController', ['jsonManager', '$scope', 

function(jsonManager, $scope){

$scope.load = function(){
  var datos = jsonManager.loadData();
  console.log(datos);
  $scope.gastos = datos.gastos.data;
  $scope.ganancias = datos.ganancias.data;


}

我从控制器中省略了一些代码;范围对象正常工作。问题是，我得到一个错误，告诉我在第55和56行未定义“数据”。为什么会发生这种情况？

Answer 1

$http服务会返回一个承诺，因此您需要使用then(successCallback, errorCallback)来解决承诺。

<强>服务

var services = angular.module('services', []);
services.factory('jsonManager', ['$http', function($http) {
    var loadData = function(){
        $http({
            method: 'GET',
            url: 'data/2015_data.json'
        });
    return {
        loadData: loadData
    };
}]);

<强>控制器

var ctrls = angular.module('controllers', ['services']);
ctrls.controller('overviewController', ['jsonManager', '$scope', function(jsonManager, $scope){
    $scope.load = function(){
        var datos = jsonManager.loadData().then(function(res) {
            console.log(res.data);
            $scope.gastos = res.data.gastos.data;
            $scope.ganancias = res.data.ganancias.data;
        }, function(err) {
            console.log(err);
        });
    };
}]);

Answer 2

$ http是异步的，

console.log(datos);
$scope.gastos = datos.gastos.data;

在jsonManager.loadData（）之前运行;返回它的价值

使用回调或承诺

function loadData(callback){
   $http({
     method: 'GET',
     url: 'data/2015_data.json'
}).then(function successCallback(response) {
    callback(null, response.data);
  }, callback);
}

$scope.load = function(){
  var datos = jsonManager.loadData(function(err, datos){
    console.log(datos);
    $scope.gastos = datos.gastos.data;
    $scope.ganancias = datos.ganancias.data;
  });
}

Answer 3

它是异步的，所以一种方法是强制它在$ scope.load中解析，如下所示：

$scope.load = function(){
  var datos = jsonManager.loadData().then(function(results){return results;});
  console.log(datos);
  $scope.gastos = datos.gastos.data;
  $scope.ganancias = datos.ganancias.data;

服务工厂不工作

3 个答案: