Onsen-UI ons-carousel没有显示来自ajax的图像

时间:2015-03-10 09:52:44

标签: html angularjs onsen-ui

我正在使用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);
        }
    });
}

});

这是运行应用的截图。

enter image description here

0 个答案:

没有答案