未定義のオブジェクトを工場から返す角度js

Question

私は以下のようにコントローラと工場を定義しています。私を混乱させる何

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

は、私は私のコントローラから未定義の出力を取得した後、コンソール出力の次の行は、私の工場からのオブジェクトの私のリストがあるということです。私はまた、

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

に私のコントローラを変更しようとしている。しかし、私はエラー

TypeError: Cannot call method 'then' of undefined 

注受け取る：私はあなたがコールバックを使用するか必要http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html

Answer 1

を通じて工場を使用してこの情報を見つけましたが関数を呼び出すか、前に戻り値を設定するだけです。$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は非同期なので、（コントローラの中で）アクセスしようとすると、データがない可能性があります（したがって、未定義になります）。

これを解決するには、コントローラからファクトリメソッドを呼び出した後に.then（）を使用します。

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

そして、あなたのコントローラ：あなたの工場は、その後のようになります

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

はそれが

を役に立てば幸い