angularjs $http.get 让 json 在服务层不起作用 [英] angularjs $http.get to get json not working in the service layer

问题描述

我正在开发一个 angularjs 应用程序，作为我学习 angularjs 的一部分.我有控制器，并从那里调用服务层.

I am developing an angularjs app as a part of my angularjs learning. I have controllers and from there I am calling service layers.

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() 时，我什么也得不到.

I noticed that because of the asynchronous nature of $http.get.then stuff, the data is not retrieved immediately and hence I would not get the "teams" when I would call getTeams() from the controller (teamsController), I would get nothing.

知道如何解决这个问题吗?

Any idea how do I resolve this?

第二次尝试:在阅读了以下帖子所建议的关于 angular 的延迟和承诺之后，我尝试了以下操作，但它仍然没有效果.我的变量 teams 没有按照我的意愿填充，然后填充它们，这对我的 UI 没有帮助:

Second Attempt: After reading about deferred and promises on angular as suggested by the post below, I tried following but it still has no effect. My variable teams is not being populates as I want and they are populated afterwards and that is not helping in my 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();
});

这是我的 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;
}
});

你或其他人能帮我做错什么吗?这是执行时在浏览器控制台中打印的内容:

Can you or someone help me what I am doing wrong? This is what is printed in the browser console upon execution:

范围内的团队:= teamController.js:27

teams in the scope:= teamsController.js:27

teams after promise:=[object Object],[object Object],[object Object],[object Object],[object Object]

teams after promise:=[object Object],[object Object],[object Object],[object Object],[object Object]

这只是表明我确实获得了 json 对象，但不是在我想要的时候.出于某种原因，这个推迟/承诺的事情没有影响.

This simply shows that I do get the json object but not at the time I want. For some reason this deffered/promise thing had no impact.

请帮助这位新的角度爱好者

推荐答案

是的，您将需要使用 promise 接口.因此，您必须直接返回一个承诺，而不是返回团队对象:

Yeah you will need to use a promise interface. So instead of returning a teams object, directly you'll have to return a promise:

承诺资源:

• http://egghead.io/lessons/angularjs-promises
• http://docs.angularjs.org/api/ng.$q

在服务中:

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;
});

这篇关于angularjs $http.get 让 json 在服务层不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！