Angular JS $ Ressource verwenden und warten auf Versprechen gelöst werden

Question

ich diesen Dienst schrieb, die $ Ressource verwendet Benutzernamen zu holen mit dem Github api

githubApiD3App.service('githubApiService', ['$resource', function($resource){ 
    this.GetuserNames = function(searchString){ 
     var githubAPI = $resource("https://api.github.com/search/users", {callback: "JSON_CALLBACK"}, {get: { method: "JSONP"}}); 

     return githubAPI.get({ q: searchString}); 
    }; 
}]); 

In meinem Controller Ich mache dieses

$scope.githubData = githubApiService.GetuserNames($scope.searchString); 

Ich weiß, dass ein Versprechen zurückgegeben wird, aber ich kann nicht in der Lage sein, meinen Dienst warten zu lassen, bevor die Daten zurückgegeben werden, oder mein Controller wartet auf die Daten. Wenn mein Code jetzt steht, bekomme ich sofort ein leeres Objekt als Antwort. Ich habe versucht, mit Erfolg in meinem Controller wie folgt

wo in der Rückruf ich die Daten zurückgeben. Das funktioniert jedoch nicht. Ich habe auch versucht, zu verwenden. $ Versprechen gepaart mit .dann in meinem Service, aber das funktioniert auch nicht.

Also, was kann ich tun, damit $ scope.githubData kein leeres Objekt zugewiesen bekommt oder auf die Antwort wartet?

Answer 1

Dies ist meine Antwort auf meine Frage. Es ist nicht die perfekte Antwort, nur weil ich versuchte, Versprechungen zu Beginn falsch zu behandeln. Diese blog post hat mir geholfen, Versprechungen besser zu verstehen und richtig mit ihnen umzugehen.

In der Steuerung meiner App statt eines Bereichs Variable w/e Zuordnung das Versprechen zurückkehrte, habe ich diese

githubApiService.getUsernames($scope.searchString).then(function(results){ 

    $scope.returnedUsers = results.data.items.splice(start, deleteCount); 

    console.log($scope.returnedUsers); 
}); 

Ich habe den Inhalt meiner Controller verkürzt, aber ich behandelt grundsätzlich alle Manipulation die Daten innerhalb der Callback-Funktion.Diese Linie

$scope.returnedUsers = results.data.items.splice(start, deleteCount); 

Werke sowohl die Variable in der Steuerung innerhalb der Callback, und auch sie mit den notwendigen Daten zu füllen, so kann es meiner Meinung nach outputed, wenn ich tue {{githubData}}. Indem ich alles innerhalb der Callback-Funktion ausführte, hörte ich auf, Fehler wegen undefinierter Variablen zu bekommen. Ich war immer Fehler, denn wenn ich etwas tue, wie dies

$scope.githubData = githubApiService.GetuserNames('engineerKev').then(function(results){ 
console.log(results.data.items[0]); 
}); 
$scope.githubData.data.items.sort(sortFunction); 

$ scope.githubData ein leeres Objekt mit nicht definierten Eigenschaften sein würde.

Also Moral der Geschichte, und bitte bearbeiten Sie meine Antwort, wenn ich immer noch keine Versprechungen erhalten, ist es, Ihre Versprechen innerhalb der Rückruffunktion in Ihrem Controller zu behandeln.

Answer 2

Mann, jetzt kann ich nicht $resource installieren, aber ich tat eine ähnliche Sache mit $http.

Check this out:

githubApiD3App.service('githubApiService', ['$resource', function($resource){ 
    return $http.get("https://api.github.com/search/users?q=" + searchString); 
    }; 
}]); 

Dann then mit handhaben ich die Ergebnisse:

scope.githubData = githubApiService.GetuserNames('engineerKev').then(function(results){ 
console.log(results.data.items[0]); 
}); 

und drucken Sie diese:

{ 
    "total_count": 1, 
    "incomplete_results": false, 
    "items": [ 
    { 
     "login": "engineerKev", 
     "id": 3943145, 
     "avatar_url": "https://avatars.githubusercontent.com/u/3943145?v=3", 
     "gravatar_id": "", 
     "url": "https://api.github.com/users/engineerKev", 
     "html_url": "https://github.com/engineerKev", 
     "followers_url": "https://api.github.com/users/engineerKev/followers", 
     "following_url": "https://api.github.com/users/engineerKev/following{/other_user}", 
     "gists_url": "https://api.github.com/users/engineerKev/gists{/gist_id}", 
     "starred_url": "https://api.github.com/users/engineerKev/starred{/owner}{/repo}", 
     "subscriptions_url": "https://api.github.com/users/engineerKev/subscriptions", 
     "organizations_url": "https://api.github.com/users/engineerKev/orgs", 
     "repos_url": "https://api.github.com/users/engineerKev/repos", 
     "events_url": "https://api.github.com/users/engineerKev/events{/privacy}", 
     "received_events_url": "https://api.github.com/users/engineerKev/received_events", 
     "type": "User", 
     "site_admin": false, 
     "score": 40.398766 
    } 
    ] 
} 

Answer 3

dieses:

$scope.githubData = githubApiService.GetuserNames($scope.searchString); 

ist korrekt für 'normal' $resource Verwendung. Wenn Sie jedoch $resource mit JSONP kombinieren, könnten die Dinge etwas unkonventionell werden. Versuchen Sie, so etwas zu tun (ich hinzugefügt isArray und änderte den Namen der Aktion mögliche Konflikte mit $resource.get zu vermeiden):

githubApiD3App.service('githubApiService', ['$resource', function($resource){ 
    this.GetuserNames = function(searchString){ 
     var githubAPI = $resource("https://api.github.com/search/users", {callback: "JSON_CALLBACK"}, {getUsers: { method: "JSONP", isArray: true}}); 

     return githubAPI.getUsers({ q: searchString}); 
    }; 
}]); 

Dann in der Steuerung:

githubApiService.GetuserNames($scope.searchString).$promise.then(function(users){ 
    $scope.githubData = users; 
}); 

Dies ist ein gutes Buch zum Thema : http://www.bennadel.com/blog/2610-using-jsonp-with-resource-in-angularjs.htm