离子滑动框不适用于 ng-repeat

Question

我需要使用 ionic 幻灯片框来显示我的应用程序中的一些图像。我使用了 ionic slide box 它似乎不适用于 ng-repeat。

这是我的html部分

<ion-view title="Promotions" ng-controller="PromotionsCtrl">


     <ion-content  class="has-header" scroll="true" padding="true">
        <ion-slide-box>

                <ion-slide ng-repeat="obj in promotions">
                        <img ng-src= {{obj.img}}> 

                </ion-slide>

         </ion-slide-box>
    </ion-content>
</ion-view>

我的控制器

.controller('PromotionsCtrl', function($scope, $http, $window, $ionicSlideBoxDelegate,$interval) {





            $http.get(  'http://******.com/B*****/service2.php?q=promotions', { cache: true})
            .then(function(res){

                  $scope.promotions = res.data['top'];


                  $ionicSlideBoxDelegate.update();
                  });
                  })

Answer 1

如果你在滑动框上使用 ng-repeat，你必须使用 update()。

看这里：

http://ionicframework.com/docs/api/service/%24ionicSlideBoxDelegate/

Answer 2

ionic 的较新版本 .rc4 会自行更新幻灯片框。尝试更新您的离子库。

Answer 3

这是我的示例，幻灯片可以工作，但是当委托处理程序更新时，"does-contunue" 的参数无法工作，我仍在寻找解决方案...

html:

<ion-slide-box on-slide-changed="slideHasChanged($index)" does-continue="true" auto-play="true" delegate-handle="image-viewer" style="height:30%;">
        <ion-slide ng-repeat="slide in slideList">
            <div class="box" style="background-image: url('{{slide.url}}');background-size:100% 100%;></div>
    </ion-slide-box>

控制器：

angular.module("myApp.controllers", ["myApp.services"])
.controller("myController", function ($scope, $ionicSlideBoxDelegate, myService,$timeout) {
    $timeout(function(){
        var slideList = myService.getSlides();
        $scope.slideList = slideList;
        $ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
    },2000)
})

服务：

angular.module("myApp.services", [])
.factory("myService", function () {
    return{
        getSlides: function () {
            var slideList = new Array();
            slideList.push("imgs/a.jpg");
            slideList.push("imgs/b.jpg");
            slideList.push("imgs/c.jpg");
            return slideList;
        }
    }
})

Answer 4

正如@Karan 所说，update 是自己调用的。但仍然存在一些问题。如 issue 中所述，如果数据未准备好，您可以禁用滑块。那么一切都会好起来的。

离子滑动框不适用于 ng-repeat

ionic slide box not working with ng-repeat

angularjs

cordova

ionic-framework