Wie konfiguriert man Angular $ resource (ngResource), um Daten aus einer anderen Domäne mit CORS

Question

zu ziehen Ich möchte in der Lage sein, Ressourcen mit $ Ressource mit CORS einzurichten, um meine Daten anzufordern. Ich habe CORS mit $ http arbeiten, aber die gleichen Techniken gelten nicht für $ Ressource und ich hoffte, jemand kann zu meiner Rettung kommen und mir zeigen, wie mit $ Ressource.

Ich habe die last step of the Angular tutorial geändert, um CORS zu verwenden, indem ich den phonecatServices-Dienst in der services.js-Datei hackt.

Ich fand this example, die die $ http.defaults.useXDomain = true; delete $ http.defaults.headers.common ['X-Requested-With']; Zeile, um angular zu bekommen, um die Daten mit CORS anzufordern, aber wenn ich versuche $ resource.defaults.useXDomain = true; Ich erhalte den Fehler: "Eigenschaft 'useXDomain' von undefined kann nicht gesetzt werden."

Ich nehme an, $ Ressource hat diese Eigenschaft nicht, also meine Frage ist, wie konfiguriere ich $ Ressource zu Cross-Domain-Ressourcenanforderungen mit CORS.

Hier ist mein Code:

angular.module('phonecatServices', ['ngResource']). 
    factory('Phone', function($resource){ 
    return $resource('http\\://localhost\\:8080/:phoneId.json', {}, { 
    query: {params:{phoneId:'phones'}, isArray:true} 
    }); 
}); 

ich folgende Fehlermeldung erhalten, wenn ich versuche, den Antrag zu stellen: Objekt # <Ressource> hat keine Methode 'push'

EDIT

Ich habe versucht, für $ http einrichten und es funktioniert die meiste Zeit, aber wenn der Anruf an die Ressource Abfrage erfolgt, in diesem Fall Phone.get (phoneId); Dies scheint den obigen Fehler zu verursachen.

Berufung Code, den ich vermute den Fehler verursacht (von controllers.js step 11 angular tutorial):

function PhoneDetailCtrl($scope, $routeParams, Phone) { 
    $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) { 
    $scope.mainImageUrl = phone.images[0]; 
    }); 

    $scope.setImage = function(imageUrl) { 
    $scope.mainImageUrl = imageUrl; 
    } 
} 

Wenn ich die Innereien des oben genannten Verfahrens entfernen Sie den Code gut läuft (ohne für die Website das Bild zu erhalten) , aber ich verstehe nicht, warum das nicht funktionieren würde? Ich habe den $ http-Dienst eingerichtet, um CORS zu verwenden, so dass er scheinbar an $ resource übergeben werden sollte.

Kann jemand Licht darauf werfen? (jeder Arbeitsbeispielcode würde sehr geschätzt werden).

EDIT: 13/08/13

Genau so jemand diese Frage zu besuchen ist sich dessen bewusst, keine der folgenden Antworten beantwortet haben wirklich die Frage, ich bin eine Antwort selbst forschen, aber wenn jemand entdeckt dies und hat eine Antwort Ich würde es immer noch sehr schätzen.

EDIT: 06/09/13

Derzeit in dieses Projekt suchen, scheint alles, damit ich suche: https://github.com/jpillora/xdomain

Answer 1

OK, die Lösung, die ich für mein Projekt gefunden habe ist xdomain: https://github.com/jpillora/xdomain

Ich akzeptiere, dass dies nicht für jedermann geeignet sein kann, aber es ist eine anständige Cross-Browser-Lösung und während wir mit IE < 10 stecken Dies scheint die beste Lösung zu sein. (Ich bin mir bewusst, IE8 und IE9 bieten teilweise Unterstützung, aber das ist wie immer mit IE nicht volle Unterstützung und ich möchte nicht Zeit verschwenden, um eine andere Arbeit für IE zu tun).

Vielen Dank an alle, die Antworten auf die Frage gegeben haben.

Answer 2

ich denke, das Beispiel für Sie arbeiten konnte

angular.module('myBeerApp.services', ['ngResource']). 
    value('version', '0.1'). 
    factory('beerDB', function($resource) { 
    return $resource('URL',{ 
     alt:'json', 
     appToken:'TOKEN', 
     q:'rock', 
     callback: 'JSON_CALLBACK' 
    }, 
     { 
     get: { 
      method:'JSONP', 
      headers: { 
      'Content-Type': 'application/json', 
      'Accept': 'application/json' 
      } 
      } 
     }); 
    }); 

Answer 3

Rufen Sie in Ihrer App useXDomain = true auf.config();