Eckiges js, das undefiniertes Objekt von der Fabrik zurückbringt

Question

Ich habe einen Controller und Fabrik wie unten definiert.

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

Was mich verwirrt ist, dass ich den Ausgang nicht definiert von meinem Controller, und dann die nächste Zeile der Ausgabe der Konsole ist meine Liste von Objekten aus meiner Fabrik. Ich habe auch versucht

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

meinen Controller zu

Ändern Aber ich erhalte den Fehler

TypeError: Cannot call method 'then' of undefined 

Hinweis: ich diese Informationen fand eine Fabrik durch http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html

Answer 1

Sie müssen entweder über die Verwendung, um einen Rückruf verwenden Funktion oder einfach eine Rückkehr vor $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 ist asynchron, dh zu dem Zeitpunkt, zu dem Sie versuchen, darauf zuzugreifen (in Ihrem Controller), sind möglicherweise keine Daten vorhanden (daher werden Sie undefiniert).

Um dies zu lösen benutze ich .then() nachdem ich die Factory-Methode von meinem Controller aufgerufen habe. Ihre Fabrik würde dann in etwa so aussehen:

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

Und Ihre Controller:

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

Hoffe, es hilft