服務工廠不能正常工作

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