Active slide from URL param

#1

Hey guys,

Ionic and AngularJS noobie here, is there a way to make a slide box go directly to a slide using a url param (or some other way)?

For instance I have

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "layouts/layout.html",
  controller: 'AppController'
})

.state('app.reflections', {
  url: "/reflections",
  views: {
    'menuContent' :{
      templateUrl: "views/reflections.html"
    }
  }
})

reflections.html contains a slide box and using a url like /reflections/1 I would like to directly navigate to that slide on that view.

I’ve tried adding

// for some reason doing app.reflections.detail doesn't work at all
.state('app.reflectionsdetail', {
  url: "/reflections/work/:page",
  views: {
    'menuContent' :{
      templateUrl: "views/reflections/work.html",
      controller: 'SlideController'
    }
  }
})

And this is what I have in the controller

.controller('SlideController', function($scope, $stateParams, $ionicSlideBoxDelegate) {
    if ($stateParams.page) {
       $scope.gotoSlide($stateParams.page);
    }

    $scope.gotoSlide = function(index) {
      $ionicSlideBoxDelegate.slide(index);
    };
 })

Visiting reflections/1 gives me a blank page with an empty slide box.

Any ideas?

#2

Actually just noticed this in the console

TypeError: undefined is not a function

that line points too

$scope.gotoSlide($stateParams.page);

No idea why it’s undefined when I did add it to scope

#3

Turns out the view wasn’t rendered yet and adding a timeout helped fix the issue.
A bit of a bummer that the first slide is shown before moving on to the desired one. If someone has a solution for this that would be wonderful!

#4

I got an example on codepen.

#5

Sorry mhartington I only saw your post now.

That doesn’t really work for me since I want to be able to go to a slide from a completely different page.
Ex: I’m on the landing page, and in the slide menu I click on a item that would take me to reflections/work/1 which would then go to that slide.

The way I did it works ok, it’s just that we see slide 0 for a split second before sliding to a different slide, would be great if it could somehow slide in the background.

#6

Hi @sergeh,

Can you post an example in codepen?
I’m having problems with this part.

Thanks

#7

< ion-slide-box on-slide-changed=“slideHasChanged($index)” active-slide={{actSlide}}>
< ion-slide>
< /ion-slide>
< ion-slide>
< /ion-slide>
< ion-slide>
< /ion-slide>
< ion-slide>
< /ion-slide>
< /ion-slide-box>

Within controller function
$scope.actSlide = Slidenumber