12

angularjs 学習の一環として、angularjs アプリを開発しています。コントローラーがあり、そこからサービスレイヤーを呼び出しています。

leagueManager.service("teamsService", function($http){
    var teams = {};
        $http.get('data/teams.json').then(function(data) {
        teams = data;
    });
    this.getTeams = function(){
        return teams;
    };

});

$http.get.then の非同期性のため、データがすぐに取得されないことに気付きました。そのため、コントローラー (teamsController) から getTeams() を呼び出しても「チーム」を取得できません。なし。

これを解決するにはどうすればよいですか？

2 回目の試行: 以下の投稿で示唆されているように、angular の deferred と promises について読んだ後、次のことを試しましたが、まだ効果がありません。私の変数チームは、私が望むように入力されておらず、後で入力されているため、UI で役に立ちません:

私のコントローラー teamController.js

leagueManager.controller('teamsController', function($scope, $location, teamsService, $routeParams){
//init function to initialize data when controller is called everytime.
var init = function(){
        $scope.teams = [];
        var promise = teamsService.getTeams();
        promise.then(
        function(data){
            console.log("teams after promise:="+data);
            $scope.teams = data;
        }
        ,function(reason)
        {
                alert('Failed: ' + reason);
        }
        );
        console.log("teams in the scope:="+$scope.teams);
};

init();
});

そして、ここに私のServiceLayer teamsService.jsがあります

leagueManager.service("teamsService", function($http, $q){
this.getTeams = function(){
  var deferred = $q.defer();
     var url = 'data/teams.json';
     $http.get(url).success(function(data, status) {
         // Some extra manipulation on data if you want...
         deferred.resolve(data);
     }).error(function(data, status) {
         deferred.reject(data);
     });
     return deferred.promise;
}
});

あなたまたは誰かが私が間違っていることを手伝ってくれますか? これは、実行時にブラウザ コンソールに出力されるものです。

スコープ内のチーム:= teamsController.js:27

約束後のチーム:=[object オブジェクト],[object オブジェクト],[object オブジェクト],[object オブジェクト],[object オブジェクト]

これは単に、json オブジェクトを取得したことを示していますが、必要なときに取得していないことを示しています。何らかの理由で、この据え置き/約束は影響を与えませんでした。

この新しいAngular Enthusiastを助けてください

4

2 に答える 2

19

ええ、promise インターフェイスを使用する必要があります。したがって、teams オブジェクトを返す代わりに、promise を直接返す必要があります。

約束のリソース:

サービス内:

leagueManager.service("teamsService", function($http){
    var deferred = $q.defer();
    $http.get('data/teams.json').then(function(data) {
        deferred.resolve(data);
    });
    this.getTeams = function(){
        return deferred.promise;
    };
});

次に、コントローラーで：

$scope.team = {};

var promise = teamsService.getTeams();
promise.then(function(data) {
    $scope.teams = data;
});
于 2013-09-12T04:30:01.427 に答える