我正在开发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()时,我不会得到“ teams”,我会得到没有。
知道我该如何解决吗?
第二次尝试: 在阅读了有关以下文章所建议的关于角度的递延和诺言之后,我尝试了跟随,但仍然没有效果。我的变量 团队 没有按照我的意愿进行填充,后来又被填充了,这对我的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 teamService.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 承诺后的团队:= [对象对象],[对象对象],[对象对象],[对象对象],[对象对象]
范围内的团队:= teamController.js:27
承诺后的团队:= [对象对象],[对象对象],[对象对象],[对象对象],[对象对象]
这只是表明我确实得到了json对象,但没有得到我想要的时间。由于某种原因,这个延迟/承诺的事情没有影响。
请帮助这个新的角度爱好者
是的,您将需要使用一个Promise接口。因此,与其直接返回一个团队对象,不如直接返回一个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; });