This is the controller for the particular view with which I’m having an issue.
.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);
}
Here is the view.
<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>
Upon clicking the list item, it triggers the state.detail
flag which switches the view to a menu item detail page. From the menu item detail page, I’m using ion-slide-box
so that users can paginate through the items as well.
This works great when I don’t specify which slide index to start on. Even when I do pick a static number to start the slider on, it works. However, when I use the $index
of the menu list as an argument to change the active slide on the slide box, the slide box just smashes all the slides together and their is no swipe functionality.
This happens even after I update the slide box.
Is there something wrong with how I am using $index
? Or perhaps this was not the intended way to dynamically set the active slide? Any advice would be appreciated!