ionic에서 현재 슬라이드의 색인을 얻는 방법?

Question

newbie here .. 이온 슬라이드를 사용하여 해당 카드 번호의 카드 세트를 보여줍니다. 현재 이온 슬라이드의 색인을 얻으려고하고 있지만 현재 내 응용 프로그램은 빈 화면을 보여줍니다. 여기 내 HTML 코드입니다 :

<ion-view title="Main Menu" id="page1"> 

    <ion-content padding="true" class="has-header" scroll="false"> 
     <ion-slides on-slide-changed="slideHasChanged($index)" disable-side-menu-drag="" options="{'loop': false}" slider="slider1" delegate-handle="slider1" id="mainMenu-slider1" style="width:100%;height:270px;"> 
     <ion-slide-page ng-repeat="card in cardNumbers" id="mainMenu-slide24" style="background:url(&quot;{{card.cardImage}}&quot;) no-repeat center;background-size:cover;"><br><br><br><br><br><br><br><br><br><br> 
      <h5>Card Number:{{card.card}}</h5> 
      <p> 
       <h5>Balance:</h5> 
     </ion-slide-page> 
     </ion-slides> 
     <ion-slides options="options" slider="slider2"> 
     <ion-slide-page id="mainMenu-slide27" style="height:400px;background-color:#d8dde6;" disable-scroll="false">1 
      <h5 align="center">Transaction History</h5> 
      <p> 
       <div class="col text-center"> 
        <button id="mainMenu-button9" class="button button-dark">View Transaction History</button> 
       </div> 
      </p> 
     </ion-slide-page> 
     <ion-slide-page id="mainMenu-slide28">2 
      <div class="spacer" style="width: 300px; height: 20px;"></div> 
      <button id="mainMenu-button5" class="button button-positive button-block">Cards</button> 
      <button id="mainMenu-button6" class="button button-positive button-block">Nearby CICOs</button> 
      <button id="mainMenu-button7" class="button button-positive button-block">FAQ</button> 
      <button id="mainMenu-button8" class="button button-positive button-block">Contact Us</button> 
     </ion-slide-page> 
     </ion-slide> 
    </ion-content> 

</ion-view> 

여기 내 controller.js 코드 : 당신이이 들어하는 데 사용되는 슬라이드를 변경하면, 그 다음

angular.module('app.controllers', []) 

    .controller('mainMenuCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', function($scope, $stateParams, $ionicSlideBoxDelegate, sendCardNumService) { 

     $scope.cardNumbers = [{ 
     card: "12345", 
     cardImage: "img/card1.png" 
     }, { 
     card: "678910", 
     cardImage: "img/card2.png" 
     }, { 
     card: "111213", 
     cardImage: "img/card3.png" 
     }] 

     $scope.currentCardNum = {} 

     $scope.slideHasChanged = function($index) { 
     $scope.currentCardNum = cardNumbers[$index].card; 
     } 

     $scope.setCurrentCardNum = function() { 
     sendCardNumService.sendCardNo($scope.currentCardNum); 
     } 

     $scope.options = { 
     direction: 'vertical', 
     slidesPerView: '1', 
     pagination: false, 
     initialSlide: 1, 
     showNavButtons: false 
     }; 

     $scope.goToHistory = function(cardNum) { 
     $location.path('/page5'); 
     } 

    }]) 

Answer 1

첫 번째 슬라이드를들을 초기화

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){ 
    $scope.slider = data.slider; 
    //first slide loads here 
    $scope.activeIndex = data.slider.activeIndex; 
    console.log($scope.activeIndex); //will return 0 
}); 

슬라이드 변경까지

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){ 
    $scope.activeIndex = data.slider.activeIndex; 
    console.log($scope.activeIndex); //will return the current index of your slide 
} 

내부에서 전화 할 수 있습니다. $ionicSlides.slideChangeStart function

Answer 2

저에게 도움이 된 것은 이것입니다. 내 컨트롤러에서 .js 코드 :

$scope.options1 = { 
    initialSlide: 0, 
    onInit: function(slider1) 
    { 
     $scope.slider1 = slider1; 
    }, 
    onSlideChangeEnd: function(slider1) 
    { 
     console.log('The active index is ' + slider1.activeIndex); 
     $scope.currentIdx = slider1.activeIndex; 
    } 

};