I'm currently facing an issue with the controller that corresponds to this specific view.
.controller('MenuCtrl', ['$rootScope','$scope','$state','$timeout','$ionicSlideBoxDelegate',
function($rootScope, $scope, $state, $timeout, $ionicSlideBoxDelegate) {
$scope.state = { detail: false, selected: 0 };
$scope.stateSwitch = function() {
$scope.state.detail = !$scope.state.detail;
$timeout( function() { $ionicSlideBoxDelegate.update(); }, 50);
}
$scope.activateSlide = function($index) {
$ionicSlideBoxDelegate.slide($index);
}
Below is the layout of the view in question.
<ion-view left-buttons="leftButtons">
<ion-content class="has-header" has-tabs="true" ng-show="!state.detail">
<div class="list menu-list">
<a class="item" ng-repeat="item in items" ng-click="stateSwitch();activateSlide($index)">
...
</a>
</div>
</ion-content>
<ion-content class="has-header padding" has-tabs="true" ng-show="state.detail">
<div class="menu-detail">
<ion-slide-box does-continue="true" show-pager="false">
<ion-slide ng-repeat="item in items">
...
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
Clicking on a list item triggers the state.detail flag, switching the view to a detailed menu item page. When on the detailed page, users can navigate through items using the ion-slide-box.
The functionality works well when I don't specify a starting slide or choose a fixed index. However, upon trying to switch the active slide by passing the $index from the menu list, all slides collapse together and swipe functionality ceases to work.
This persists even after updating the slide box.
Am I mishandling the use of $index? Is there a better way to dynamically set the active slide? Any guidance would be greatly appreciated!