I'm trying to figure out how to effectively transition between sibling states using $state.go() in ui-router.
Imagine a child state with integer-based URLs: /parent/1, parent/2, parent/3 and so on
I want to be able to navigate between these child states with back and next buttons.
Implementation (routes.js):
// child states: /parent/1, /parent/2, /parent/3 etc
{
name: '3-INT-TOTM.detail',
url: '/:slide_id',
templateUrl: 'app/html-partials/part-1/3-int.detail.html',
params: {
score: null
},
controller: function ($scope, $stateParams, $log, $location, $state) {
// retrieves active slide from parent controller slides using $stateParams
$scope.slide = $scope.slides[$stateParams.slide_id];
// Navigation
$scope.nextSlide = function () {
$state.go(''); // <-- what should I put here to move to the next child state?
// For example, if I am at /parent/2 and want to go to /parent/3?
Maybe something like:
$state.go('3-INT-TOTM.detail'[$stateParams.slide_id] + 1 );
^ This is definitely incorrect, but you get the idea of what I'm trying to achieve.