（离子框架）某些离子幻灯片盒不能在一页

Question

我的html中有三个幻灯片框，幻灯片有时会停止工作（在最后一张幻灯片后不会再次滑动）。示例首先是幻灯片A，B是有效的，但C不起作用，当我再次刷新页面时，幻灯片A，C有效但B不起作用。感谢。

这是我的代码：

HTML：

<ion-view view-title="Home">
  <ion-content class="padding">
      <h1>Promotions</h1>
    <ion-slide-box show-pager="false" auto-play="true" does-continue="true" delegate-handle="promo" slide-interval="2000">
        <ion-slide ng-repeat="promo in promos" >
            <img ng-src="{{promo.image}}" style="width:300px;height:300px;margin:auto;display:block" >
        </ion-slide>
    </ion-slide-box>

    <h1>Featured & Top</h1>
    <div class="row padding-bottom" style="padding-bottom:20px ">
        <div class="column padding-right"> 
            <button class="button button-energized" ng-click="showDataFeatured()">
            Featured <span class="ion-android-restaurant"> <span class="ion-pizza">
        </button>
        </div>

        <div class="column padding-right"> 
        <button class="button button-energized padding-right" ng-click="showDataTopResto()">
            Top <span class="ion-android-restaurant">
        </button>
        </div>

        <div class="column padding-right"> 
        <button class="button button-energized" ng-click="showDataTopKuliner()">
            Top <span class="ion-pizza">
        </button>
        </div>
    </div>

    <ion-slide-box show-pager="false" auto-play="true" does-continue="true" delegate-handle="featured" slide-interval="2000">
        <ion-slide ng-repeat="featured in featureds" >
            <div class="list card">
                <div class="item item-image">
                    <img ng-src="{{featured.main_img}}" style="width:300px;height:300px;margin:auto;display:block" >
                </div>

                <div class="item item-divider energized-bg" style="text-align: center; color: white;" ng-if="!utils.isUndefinedOrNull(featured.nama)">
                    {{featured.nama}}
                </div>

                <div class="item item-divider energized-bg" style="text-align: center; color: white;" ng-if="!utils.isUndefinedOrNull(featured.alamat)">
                    {{featured.alamat}}
                </div>
            </div>
        </ion-slide>
    </ion-slide-box>

    <h1>News</h1>
    <ion-slide-box show-pager="false" auto-play="true" does-continue="true" delegate-handle="news" slide-interval="2000">
        <ion-slide ng-repeat="theNews in news" >
            <div class="list card">
                <div class="item item-image">
                    <img ng-src="{{theNews.main_img}}" style="width:300px;height:300px;margin:auto;display:block" >
                </div>

                <div class="item item-divider energized-bg" style="text-align: center; color: white;" ng-if="!utils.isUndefinedOrNull(theNews.judul)">
                    {{theNews.judul}}
                </div>

                <div class="item item-divider energized-bg" style="text-align: center; color: white;" ng-if="!utils.isUndefinedOrNull(theNews.berita)">
                    {{theNews.ket_img}}
                </div>
            </div>
        </ion-slide>
    </ion-slide-box>

  </ion-content>
</ion-view>

这是我的控制器：

.controller('HomeCtrl', function(Utils,$scope, $stateParams, $state, promoServices, featuredServices, kulinerServices, restoServices,newsServices, $ionicSlideBoxDelegate) {
    $scope.promos =[];
    $scope.featureds =[];
    $scope.news = [];
    $scope.utils = Utils;

    $scope.showDataPromo = function() {
      promoServices.getAll().success(function(data) {
            $scope.promos = data;
        })
    };

    $scope.showDataFeatured = function() {
      featuredServices.getAll().success(function(data) {
            $scope.featureds = [];
            $scope.featureds = data;
             setTimeout(function() {
                $ionicSlideBoxDelegate.$getByHandle('featured').slide(0);
                $ionicSlideBoxDelegate.$getByHandle('featured').update();
                $ionicSlideBoxDelegate.$getByHandle('featured').start();
                $scope.$apply();
            });

        })
    };

    $scope.showDataTopKuliner = function() {
      kulinerServices.getTopKuliner().success(function(data) {
            $scope.featureds = [];
            $scope.featureds = data;
            setTimeout(function() {
                $ionicSlideBoxDelegate.$getByHandle('featured').slide(0);
                $ionicSlideBoxDelegate.$getByHandle('featured').update();
                $ionicSlideBoxDelegate.$getByHandle('featured').start();
                $scope.$apply();
            });
        })
    };

    $scope.showDataTopResto = function() {
      restoServices.getTopResto().success(function(data) {
            $scope.featureds = [];
            $scope.featureds = data;
            setTimeout(function() {
                $ionicSlideBoxDelegate.$getByHandle('featured').slide(0);
                $ionicSlideBoxDelegate.$getByHandle('featured').update();
                $ionicSlideBoxDelegate.$getByHandle('featured').start();
                $scope.$apply();
            });
        })
    };

    $scope.showDataNews = function() {
      newsServices.getAll().success(function(data) {
            $scope.news = [];
            $scope.news = data;
            setTimeout(function() {
                $ionicSlideBoxDelegate.$getByHandle('news').slide(0);
                $ionicSlideBoxDelegate.$getByHandle('news').update();
                $ionicSlideBoxDelegate.$getByHandle('news').start();
                $scope.$apply();
            });
        })
    };

    $scope.showDataPromo();
    $scope.showDataFeatured();
    $scope.showDataNews();


})