Ион-слайды, не показывающие внутри ионного содержимого и деления

Question

Я новичок в Ionic Framework (разработка гибридных приложений) от разработки приложений для iOS. Я должен разработать экран, который должен иметь две кнопки, как " Recent and All ". Если мы нажимаем" Недавние ", последние элементы должны отображаться в списке, а если мы нажимаем" Все ", то должны отображаться все элементы в списке. Я пытаюсь использовать" ion-slides "Контроль использования двух разных списков. Я реализовал ion-слайды на html-странице внутри" ion-view ", это перекрывает две кнопки (последние, все кнопки перекрываются и не активируются). Если я добавлю" ion-slides" in "ion-content" or "div", the slides are not in visible, Кроме того, мне нужно изменить слайды на основе действий кнопки, если я нажимаю кнопку "Недавние", нужно показать первый слайд. Я реализовал ionicSlideBoxDelegate ", но это не работает. Как я могу решить эту проблему? Не могли бы вы помочь?

<ion-view view-title="Slide Box" ng-controller='homeViewController'>
    <ion-content>
        <div>
            <button ng-click="nextSlide()">Recent</button>
            <button ng-click="previousSlide()">All</button>
        </div>
        <div class="slide-wrapper1">
            <ion-slides pager="false" options="sliderOptions">
                <ion-slide-page>
                    <ion-content>
                        <h1>First Slide</h1>
                    </ion-content>
                </ion-slide-page>
                <ion-slide-page>
                    <ion-content>
                        <h1>Second Slide</h1>
                    </ion-content>
                </ion-slide-page>
            </ion-slides>
        </div>
    </ion-content> 
</ion-view>

Я могу видеть журнал "Следующая кнопка нажата", но действие не выполняется.

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

  $scope.nextSlide = function() {
    console.log("Next Button clicked", $ionicSlideBoxDelegate);
    $ionicSlideBoxDelegate.next();
    //$ionicSlideBoxDelegate.$getByHandle('burgers').next();
  }

  $scope.sliderOptions = {
      effect: 'slide',
      pagination: false,
      initialSlide: 0
    }

})

Заранее спасибо.

Answer 1

Это не работает внутри div. Держите его вне div, он будет работать нормально.