我正在使用ons-carousel来显示使用ajax从网络中获取的一些图像。但问题是,它没有显示图像。但是当我在chrome开发人员工具中看到它时,图像和轮播项目存在于html中。 我可以看到ons-carousel-item可见性隐藏在css中。当我制作一个静态ons-carousel,它没有从ajax加载图像但是以相同的方式使用ng-repeat时,旋转木马工作正常。这是我的代码。
HTML
<ons-page controller="hotelDetails">
<div ng-init="getHotel()">
<ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" noslidingmenu>
<ons-carousel-item style="background-color: gray;" ng-repeat="thumb in images" style="visibility: visible">
<img src="{{thumb}}" style="width: 100%"/>
</ons-carousel-item>
<ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
</ons-carousel>
</div>
</ons-page>
AngularJS
module.controller('hotelDetails', function($scope){
var page = $scope.ons.navigator.getCurrentPage();
$scope.id = page.options.id;
$scope.title = page.options.title;
$scope.getHotel = function(){
console.log('Loading data');
$.ajax({
url: "http://domain.com/api/hotels/hoteldetails",
dataType: "jsonp",
data: {
id: $scope.id
},
success: function(data){
console.log('Success');
$scope.$apply(function(){
$scope.images = data.images;
});
},
error: function(error){
console.log(error);
}
});
}
});
这是运行应用的截图。