服务工厂不能正常工作

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行中“datos”未定义。为什么会发生这种情况？

Answer 1

$ 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 2

它是异步的，所以一个办法是迫使它解决$ 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; 

Answer 3

的$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); 
     }); 
    }; 
}]);