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() 时，我不会得到“团队”，我会得到没有什么。

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

第二次尝试： 在阅读了下面帖子所建议的关于 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 团队Service.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 Object],[object Object],[object Object]

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

请帮助这位新的 Angular 爱好者

4

2 回答 2

19

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

承诺资源：

在服务中：

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 回答
1

这应该可以正常工作：

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;

}]);
于 2015-05-26T07:51:43.550 回答