您的位置:首页 > Web前端 > AngularJS

ionic 中使用 slidebox 利用angular ng-repeat 渲染后不显示问题

2016-05-18 14:27 375 查看
在使用ionic slidebox指令做图片轮播显示的时候,发现一个问题,ng-repeat遍历生成一个个slide块的时候,执行完成页面是空白的。

方法:1

ng-repeat的数据是延迟加载过来的。当 img 没有渲染结束是不能工作的,你这样改一下:

<ion-slide-box ng-if="slideimgs" on-slide-changed="slideHasChanged($index)" class="slidebox" auto-play="true" slide-interval="4000" delegate-handle="slideimgs" does-continue="true">

<ion-slide ng-repeat="imginfo in slideimgs">

...

</ion-slide>

</ion-slide-box>

在ion-slide-box 加上 ng-if = “repeat value”

方法2:

要手动在渲染之后更新一下,在控制器注入$ionicSlideBoxDelegate,然后渲染数据之后,添加$ionicSlideBoxDelegate.update();

.controller('MyPhotosCtrl', function ($scope, $ionicSlideBoxDelegate) {

$scope.photos= [ ... ]

$ionicSlideBoxDelegate.update();

})

<slide-box show-pager="false" on-slide-changed="onSlideChanged(index)" active-slide="currentIndex">

<slide ng-repeat="photo in photos">

<img ng-src="{{ photo.ThumbnailURL }}" />

</slide>

</slide-box>

问题链接:
https://forum.ionicframework.com/t/slides-generated-with-ng-repeat-causing-issues-slide-box/394/6 http://ionichina.com/topic/55056b24a6a368202ec81659
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: