目前正在开发Angular JS电视应用程序.该应用程序从api调用中获取数据.我试图从结果数组中获取图像.
这是mainController.js的代码
app.controller("mainController",function($scope,$http){
$scope.apiKey = "b3e2e6f87d3aeec3075668a1bd4a78e2";
$scope.init = function(){
//api call requires format,apiKey,date,and days
var today = new Date();
//format apiDate according to the api specifications
var apiDate = today.getFullYear() + ("0" + (today.getMonth()+1)) + today.getDate();
$scope.results = [];
console.log(apiDate);
$http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function (data){
//connection successful
//console.log(data);
angular.forEach(data,function (value,index){
var date = value.date;//stores the date of the tv shows
angular.forEach(value.episodes,function (tvshow,index){
//this adds the locally store date to the tvshow object
tvshow.date = date;
$scope.results.push(tvshow);
});//end 2nd for each
});//end 1st for each
}).error(function (error){
//connection Failed
});
};
});
这是index.html的代码
<ul class="episode-list">
<li ng-repeat="tvshow in results">
<div class="row-fluid">
<div class="span3">
<img src="{{tvshow.episode.images.screen}}"/>
</div>
</div>
</li>
</ul>
控制台返回以下错误：
GET：//localhost/tvApp/{{tvshow.episode.images.screen}} 404(未找到)localhost /：29
GET //localhost/tvApp/{{tvshow.episode.images.screen}} 404(未找到)
angular.min.js：20
我不太清楚为什么会这样.任何帮助将是欣赏.我一直在寻找类似的问题,但没有成功
解决方法
使用ng-src而不是src：
<img ng-src="{{tvshow.episode.images.screen}}">
这可以防止在AngularJS处理Angular标记之前加载图像.使用src将加载文字网址http://www.mydomain.com/{{tvshow.episode.images.screen}}.