我最近发布了一篇关于我在SO面临的问题的详细描述。由于我无法发送一个实际的$http请求，所以我使用timeout来模拟异步行为。在@Gloopy的帮助下，从我的模型到视图的数据绑定工作正常
现在，当我使用$http而不是$timeout(在本地测试)时，我可以看到异步请求是成功的，数据在我的服务中被json响应填充。但是，我的观点并没有更新。
在这里更新Plunkr
当前回答
简单点。这很简单
在您服务期间退货承诺(在您服务期间无需使用) 在你的控制器中使用then
演示。http://plnkr.co/edit/cbdG5p?p=preview
var app = angular.module('plunker', []);
app.factory('myService', function($http) {
return {
async: function() {
return $http.get('test.json'); //1. this returns promise
}
};
});
app.controller('MainCtrl', function( myService,$scope) {
myService.async().then(function(d) { //2. so you can use .then()
$scope.data = d;
});
});
其他回答
我读过http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ [AngularJS允许我们通过直接在作用域上放置承诺来简化我们的控制器逻辑，而不是在成功回调中手动处理已解析的值。]
如此简单和方便:)
var app = angular.module('myApp', []);
app.factory('Data', function($http,$q) {
return {
getData : function(){
var deferred = $q.defer();
var promise = $http.get('./largeLoad').success(function (response) {
deferred.resolve(response);
});
// Return the promise to the controller
return deferred.promise;
}
}
});
app.controller('FetchCtrl',function($scope,Data){
$scope.items = Data.getData();
});
希望这对你有所帮助
我也有同样的问题，但当我在互联网上冲浪时，我明白$http返回默认的承诺，然后我可以在返回“数据”后使用“然后”。看看代码:
app.service('myService', function($http) {
this.getData = function(){
var myResponseData = $http.get('test.json').then(function (response) {
console.log(response);.
return response.data;
});
return myResponseData;
}
});
app.controller('MainCtrl', function( myService, $scope) {
// Call the getData and set the response "data" in your scope.
myService.getData.then(function(myReponseData) {
$scope.data = myReponseData;
});
});
简单点。这很简单
在您服务期间退货承诺(在您服务期间无需使用) 在你的控制器中使用then
演示。http://plnkr.co/edit/cbdG5p?p=preview
var app = angular.module('plunker', []);
app.factory('myService', function($http) {
return {
async: function() {
return $http.get('test.json'); //1. this returns promise
}
};
});
app.controller('MainCtrl', function( myService,$scope) {
myService.async().then(function(d) { //2. so you can use .then()
$scope.data = d;
});
});
我认为更好的方式是这样的:
服务:
app.service('FruitsManager',function($q){
function getAllFruits(){
var deferred = $q.defer();
...
// somewhere here use: deferred.resolve(awesomeFruits);
...
return deferred.promise;
}
return{
getAllFruits:getAllFruits
}
});
在控制器中，你可以简单地使用:
$scope.fruits = FruitsManager.getAllFruits();
Angular会自动把解析后的awesomfruits放到$scope.fruits中。
至于在服务中缓存响应，这里有另一个版本，似乎比我目前看到的更直接:
App.factory('dataStorage', function($http) {
var dataStorage;//storage for cache
return (function() {
// if dataStorage exists returned cached version
return dataStorage = dataStorage || $http({
url: 'your.json',
method: 'GET',
cache: true
}).then(function (response) {
console.log('if storage don\'t exist : ' + response);
return response;
});
})();
});
该服务将返回缓存的数据或$http.get;
dataStorage.then(function(data) {
$scope.data = data;
},function(e){
console.log('err: ' + e);
});
