Make specific Slide Box slides clickable to reveal modal on ng-click

ionic-v1
1

Make specific Slide Box slides clickable to reveal modal on ng-click I figured this out!

2

Hi Kat

Can you share your code - could be useful solution for others too

many thanks
Darren

1 Like
3

Heading

sure… here is my controllers.js code

.controller('DashCtrl', function($scope,$ionicSlideBoxDelegate, $ionicSideMenuDelegate, $ionicModal) {
  $scope.collections = [
    {id:0,src:'images/report/page01.jpg',title:'Annual Report 1'},
    {id:1,src:'images/report/page02.jpg',title:'Annual Report 2'},
    {id:2,src:'images/report/page03.jpg',title:'Annual Report 3'},
    {id:3,src:'images/report/page04.jpg',title:'Annual Report 4'},
    {id:4,src:'images/report/page05.jpg',title:'Annual Report 5'},
    {id:5,src:'images/report/page06.jpg',title:'Annual Report 6'},
    {id:6,src:'images/report/page07.jpg',title:'Annual Report 7'},
    {id:7,src:'images/report/page08.jpg',title:'Annual Report 8'},
    {id:8,src:'images/report/page09.jpg',title:'Annual Report 9'},
    {id:9,src:'images/report/page10.jpg',title:'Annual Report 10'},
    {id:10,src:'images/report/page11.jpg',title:'Annual Report11'},
    {id:11,src:'images/report/page12.jpg',title:'Annual Report12'},
    {id:12,src:'images/report/page13.jpg',title:'Annual Report13'},
    {id:13,src:'images/report/page14.jpg',title:'Annual Report14'},
    {id:14,src:'images/report/page15.jpg',title:'Annual Report15'},
    {id:15,src:'images/report/page16.jpg',title:'Annual Report16'},
    {id:16,src:'images/report/page17.jpg',title:'Annual Report17'},
    {id:17,src:'images/report/page18.jpg',title:'Annual Report18'},
    {id:18,src:'images/report/page19.jpg',title:'Annual Report19'},
    {id:19,src:'images/report/page20.jpg',title:'Annual Report20'},
    {id:20,src:'images/report/page21.jpg',title:'Annual Report21'},
    {id:21,src:'images/report/page22.jpg',title:'Annual Report22'},
    {id:22,src:'images/report/page23.jpg',title:'Annual Report23'},
    {id:23,src:'images/report/page24.jpg',title:'Annual Report24'},
    {id:24,src:'images/report/page25.jpg',title:'Annual Report25'},
    {id:25,src:'images/report/page26.jpg',title:'Annual Report26'},
    {id:26,src:'images/report/page27.jpg',title:'Annual Report27'},
    {id:27,src:'images/report/page28.jpg',title:'Annual Report28'},
    {id:28,src:'images/report/page29.jpg',title:'Annual Report29'},
    {id:29,src:'images/report/page30.jpg',title:'Annual Report30'},
    {id:30,src:'images/report/page31.jpg',title:'Annual Report31'},
    {id:31,src:'images/report/page32.jpg',title:'Annual Report32'},
    {id:32,src:'images/report/page33.jpg',title:'Annual Report33'},
    {id:33,src:'images/report/page34.jpg',title:'Annual Report34'},
    {id:34,src:'images/report/page35.jpg',title:'Annual Report35'}
  ];

// modal for video
  $ionicModal.fromTemplateUrl('templates/videoModal.html', function(modal) {
    $scope.videoModal = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
// open video modal
  $scope.openvideoModal = function() {
    $scope.videoModal.show();
  };
// close video modal
  $scope.closevideoModal = function() {
    $scope.videoModal.hide();
  };
  //Cleanup the video modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.videoModal.remove();
  });


// bio modal
  $ionicModal.fromTemplateUrl('templates/ceoBio.html', function(modal) {
    $scope.ceoBio = modal;
  }, {
    scope: $scope,
    animation: 'slide-in-up'
  });
// open bio modal
  $scope.openceoBio = function() {
    $scope.ceoBio.show();
  };
// close bio modal
  $scope.closeceoBio = function() {
    $scope.ceoBio.hide();
  };
  //Cleanup the bio modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.ceoBio.remove();
  });




  $scope.slideChanged = function(index) {
    $scope.slideIndex = null;
    $scope.slideIndex = 'Page ' + index;
  };

  $scope.check= function(){
    var current=$ionicSlideBoxDelegate.currentIndex();
    if (current == 3) {
      $scope.openvideoModal();
    }
    if (current == 7) {
      $scope.openceoBio();
    }
  };

  $scope.nextSlide = function() {
    $ionicSlideBoxDelegate.next();
  };
  $scope.prevSlide = function() {
    $ionicSlideBoxDelegate.previous();
  };

  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

in my html file with the slide box i have

<ion-slide-box on-slide-changed="slideChanged(index)" does-continue="false" delegate-handle="{{collection.id}}" disable-scroll="true" show-pager="false">
    <ion-slide ng-repeat="collection in collections" ng-click="check()">
      <img class="box" src="{{collection.src}}"> 
    </ion-slide>
  </ion-slide-box>

then I have my modal html page

 <div class="modal">
    <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">George and Oscar Feldenkreis</h1>
      <button class="button button-clear button-primary" ng-click="closeceoBio()">Close</button>
    </ion-header-bar>
    <ion-content>
      <div class="padding">
    <iframe width="640" height="480" src="//www.youtube.com/embed/vrp891h_FwI" frameborder="0" allowfullscreen></iframe>
      </div>
    </ion-content>
  </div>