컨트롤러 angularjs에서 공장을 사용하는 방법

Question

팩토리를 생성하여 컨트롤러에서 사용하려고하면 팩토리가 get 메서드에서 데이터를 반환하고 컨트롤러에 저장하지만 작동하지 않으며 $ scope.myData가 undefind를 반환합니다.

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, myService) { 
    $scope.myData = myService.getEvent(); 
}); 
app.factory('myService', function($http){ 
    var oGetData = {}; 
    oGetData.getEvent = function(){ 
     $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival') 
     .then(function(response) { 
     return response.data.event; 
     }); 
    }; 

    return oGetData ; 
}); 

내가 잘 그 작업 컨트롤러에 직접 공장 코드를 사용할 때

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
    $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival') 
     .then(function(response) { 
      $scope.myData = response.data.event; 
     }); 
}); 

누군가가 내가 첫 번째 코드에서 잘못된하십시오 무슨 짓을했는지 말해 줄 수? http://codepen.io/jdoyle/pen/KgLjgY

이것은 자주 묻는 질문 :

여기 codepen http://codepen.io/anon/pen/NRVZdE

Answer 1

작업 Codepen입니다. 당신은이 데이터를 반환 할 것으로 예상되지만, 그렇지 않습니다 :

app.controller('myCtrl', function($scope, myService) { 
    $scope.myData = myService.getEvent(); 
}); 

getEvent()는 약속이 아니라 데이터를 반환합니다.

app.controller('myCtrl', function($scope, myService) { 
    myService.getEvent().then(function(response){ 
     $scope.myData = response.data.event; 
    }); 
}); 

그리고 당신의 공장에서 바로 $http 및 아무것도에 전화를 반환 : 당신은 $http에 대한 호출이 것 당신처럼 반환 객체를 처리 할 필요가 당신이를 수정하려면

oGetData.getEvent = function(){ 
    return $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival'); 
}; 

이 컨트롤러에 다시 오기 전에 데이터는이 같은 자신을 자신이 연기 만들고 응답을 처리 할 수있는 그런 다음

oGetData.getEvent = function(){ 
    var deferred = $q.defer(); 
    $http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival') 
    .then(function(response) { 
     deferred.resolve(response.data.event); 
    }); 
    return deferred.promise; 
}; 

그렇지 응답 데이터에서 이벤트를 받고 대해 걱정할 필요가 :

app.controller('myCtrl', function($scope, myService) { 
    myService.getEvent().then(function(event){ 
     $scope.myData = event; 
    }); 
});