js angolare che restituisce un oggetto non definito dalla fabbrica

Question

Ho un controller e una fabbrica definita come di seguito.

myApp.controller('ListController', 
     function($scope, ListFactory) { 
    $scope.posts = ListFactory.get(); 
    console.log($scope.posts); 
}); 

myApp.factory('ListFactory', function($http) { 
    return { 
     get: function() { 
      $http.get('http://example.com/list').then(function(response) { 
       if (response.data.error) { 
        return null; 
       } 
       else { 
        console.log(response.data); 
        return response.data; 
       } 
      }); 
     } 
    }; 
}); 

Ciò che mi confonde è che ho l'uscita undefined dal mio controllo, e poi la prossima linea di uscita della console è la mia lista di oggetti dalla mia fabbrica. Ho anche provato a cambiare il mio controller di

myApp.controller('ListController', 
     function($scope, ListFactory) { 
    ListFactory.get().then(function(data) { 
     $scope.posts = data; 
    }); 
    console.log($scope.posts); 
}); 

Ma ho visualizzato l'errore

TypeError: Cannot call method 'then' of undefined 

Nota: ho trovato questa informazione sull'utilizzo di una fabbrica attraverso http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html

Answer 1

È necessario usare sia ad un callback funzione o semplicemente inserire un ritorno prima $http.get...

return $http.get('http://example.com/list').then(function (response) { 
    if (response.data.error) { 
     return null; 
    } else { 
     console.log(response.data); 
     return response.data; 
    } 
}); 

Answer 2

$ http.get è asincrono quindi nel momento in cui si tenta di accedervi (all'interno del controller) potrebbe non avere dati (quindi si ottiene undefined).

Per risolvere il problema, utilizzo .then() dopo aver chiamato il metodo factory dal mio controller. La vostra fabbrica quindi sarebbe simile:

myApp.factory('ListFactory', function($http) { 
    return { 
     get: function() { 
      $http.get('http://example.com/list'); 
     } 
    }; 
}); 

E il controller:

myApp.controller('ListController', function($scope, ListFactory) { 
    ListFactory.get().then(function(response){ 
     $scope.posts = response.data; 
    }); 
    // You can chain other events if required 
}); 

Speranza che aiuta