[英]Angularjs not storing variable to $scope after AJAX call within $http.get request
I'm using angularjs
and I can't get the following controller to save to a $scope variable the data returned from an AJAX
request to Flickr. 我正在使用angularjs
,我无法使用以下控制器将从AJAX
请求返回的数据保存到$ scope变量到Flickr。 The $http.get
makes a call to a locally saved json file. $http.get
调用本地保存的json文件。 Upon success, it uses the json returned in success()
to determine the appropriate url for the AJAX call to the Flickr API. 成功后,它使用success()
返回的json来确定对Flickr API的AJAX调用的适当URL。 Upon success of that call, I log the data to the console. 该调用成功后,我将数据记录到控制台。 So far so good, it returns an array of three objects. 到目前为止,它返回了一个包含三个对象的数组。 However, I'm trying to set that array to a $scope variable ( $scope.photos
) so I can iterate over it my view template. 但是,我正在尝试将该数组设置为$ scope变量( $scope.photos
),因此我可以迭代它的视图模板。 However, when I try outputing {{photos}}
in the html there is nothing. 但是,当我尝试在html中输出{{photos}}
,什么都没有。 I suspect this is a promise issue, and the template is rendering before the AJAX returns the data from Flickr, but I've been pouring over the docs with no success (looked at $q
a little). 我怀疑这是一个承诺问题,模板在AJAX从Flickr返回数据之前呈现,但我一直在倾向于文档但没有成功(看一下$q
)。 I'm somewhat new to Angular and would appreciate your insight. 我对Angular有些新意,也非常感谢您的见解。 Thanks! 谢谢!
artistControllers.controller('PhotoController', ['$scope', '$http', '$routeParams', '$q', function ($scope, $http, $routeParams, $q){
$http.get('js/data.json').success(function(data){
$scope.artists = data;
$.ajax({
type : "GET",
dataType : "jsonp",
url : $scope.artists[$routeParams.itemId].flickr,
success: function(flickr){
$scope.photos = flickr.items;
console.log($scope.photos);
}
});
});
}]);
Don't use jQuery.ajax
. 不要使用jQuery.ajax
。 Angular's $http
can do JSONP
too. Angular的$http
也可以做JSONP
。 You can read more about here . 你可以在这里阅读更多信息。
artistControllers.controller('PhotoController', ['$scope', '$http', '$routeParams', '$q', function ($scope, $http, $routeParams, $q){
$http.get('js/data.json').success(function(data){
$scope.artists = data;
$http.jsonp($scope.artists[$routeParams.itemId].flickr).success(function(data){
$scope.photos = flickr.items;
console.log($scope.photos);
});
});
}]);
Because you are executing code outside of Angular's knowledge, you need to manually call $scope.$digest()
for it to "see" your change and update the markup accordingly. 因为您正在执行Angular知识之外的代码,所以您需要手动调用$scope.$digest()
来“查看”您的更改并相应地更新标记。
Just change your success handler to: 只需将成功处理程序更改为:
success: function(flickr){
$scope.photos = flickr.items;
$scope.$digest();
}
Note: $scope.$apply()
would also work, because it does a $digest
of every single scope in your application, starting from the $rootScope
down. 注意: $scope.$apply()
也可以工作,因为它会从$rootScope
向下开始对应用程序中的每个作用域进行$digest
。 On a big application, this can be much slower than necessary, so in your case I recommend only digesting from the scope you are modifying down. 在一个大型应用程序中,这可能比必要的慢得多,因此在您的情况下,我建议仅从您正在修改的范围中进行消化。
Thank you everyone for your help and feedback. 感谢大家的帮助和反馈。 I have found a solution using $q and $http.jsonp, in part thanks to this tutorial: 我找到了使用$ q和$ http.jsonp的解决方案,部分归功于本教程:
http://youtu.be/gApduktFwxw?t=17m http://youtu.be/gApduktFwxw?t=17m
Here is my code, note that my API url string to flickr has &jsoncallback=JSON_CALLBACK
appended to it: 这是我的代码,请注意我的flickr的API url字符串附加了&jsoncallback=JSON_CALLBACK
:
$http.get('js/data.json').success(function(data){
$scope.artist = data[$routeParams.itemId];
var url = $scope.artist.flickr;
console.log(url);
$scope.init = function(){
$scope.getImages()
.then(function(res){
console.log(res);
}, function(status){
console.log(status);
});
};
$scope.getImages = function(){
var defer = $q.defer();
$http.jsonp(url)
.success(function(res){
defer.resolve(res);
console.log(res);
}).error(function(status, err){
defer.reject(status);
console.log(err);
});
return defer.promise;
};
$scope.init();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.