將$ ionicSlideBoxDelegate用於Ionic中的兩個或更多幻燈片框

Question

很抱歉，HTML和AngularJS中的這個初學者問題。 我在一頁中有兩個幻燈片框。 我希望當用戶單擊上一個/下一個箭頭按鈕時，它顯示上一個/下一個幻燈片。 但是問題是，單擊上一個/下一個箭頭時，兩個框中的所有幻燈片都轉到上一個/下一個幻燈片。 單擊第一個幻燈片框中的下一個按鈕時，只有第一個幻燈片框中的幻燈片會轉到下一個幻燈片，該如何制作？ 我可以僅使用$ ionicSlideBoxDelegate進行操作，還是需要其他方式？ 謝謝...

這是我的HTML代碼：

<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/pizza1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Pizza 1 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/pizza2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Pizza 2 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Pizza Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/pizza3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Pizza 3</h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>
</ion-slide-box>

<ion-slide-box show-pager="false" auto-play="true" does-continue="true" style="background-image:url('img/border.jpg'); background-repeat: no-repeat;">
    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/burger1.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Burger 1 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/burger2.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Burger 2 </h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>

    <ion-slide>
        <h3 style="padding-left:10px; padding-top:5px;">Burger Favourite</h3>
        <div class="row">
            <div class="ion-ios-arrow-back col col-5" style="padding-top:50px;" ng-click="previousSlide()"/></div>
            <span class="row">
                <img src="img/burger3.jpg" class="col col-50" style="width:100px; height:100px; margin-top:-10px">
                <div class="col col-50">
                    <h4 class="row" style="margin-top:-10px">Burger 3</h4>
                    <div class="row" style="margin-top:-20px">
                        <img src="img/smile.jpg" style="width:50px; height:50px;"class="col col-40">
                        <h4 class="col col-60"> 5.0</h4>
                    </div>
                </div>
            </span>
            <div class="ion-ios-arrow-forward col-5" style="padding-top:50px;" ng-click="nextSlide()"/></div>
        </div>
    </ion-slide>
</ion-slide-box>

這是我的控制器代碼：

.controller('HomeCtrl', function($scope, $ionicSlideBoxDelegate) {
    $scope.nextSlide = function() {
        $ionicSlideBoxDelegate.next();
    };

    $scope.previousSlide = function() {
        $ionicSlideBoxDelegate.previous();
    }
})

Answer 1

您需要為每個幻燈片框指定“句柄”：

<ion-slide-box delegate-handle="burgers">...</ion-slide-box>

然后，您可以使用手柄控制特定的幻燈片框：

$ionicSlideBoxDelegate.$getByHandle('burgers').next();

這是$getByHandle的文檔