web-dev-qa-db-ja.com

anglejs $ http.getは、jsonがサービスレイヤーで機能しないようにします

私は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）に関する延期と約束について読んだ後、以下の投稿で提案されているように、フォローしようとしましたが、それでも効果がありません。私の変数teamは私が望むように入力されておらず、後で入力されますが、それは私のUIでは役に立ちません：

私のコントローラーteamsController.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();
});

そして、これが私のServiceLayerteamsService.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;
}
});

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

スコープ内のチーム：= teamController.js：27

約束後のチーム：= [オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]

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

この新しいを助けてくださいANGULAR ENTHUSIAST

angularjsangularjs-serviceangular-http
12
cooler

ええ、あなたは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;
});
19
hajpoj

これは正常に機能するはずです：

myApp.factory('mainFactory',['$http',function($http){

var mainFactory = {};

mainFactory.getRandomUser = function(){
    var promise;
    if(!promise){
        promise = $http.get('http://api.randomuser.me/').success(function(d){
            return d;   
        });
        return promise;
    }
};

mainFactory.getRandomImage = function(){
    var promise;
    if(!promise){
        promise = $http.get('http://lorempixel.com/400/200/').success(function(d){
            return d;   
        });
        return promise;
    }
};

return mainFactory;

}]);
1
Yaniv Vova Alterman