Ionic ion-nav-view inside a slide-box

ionic-v1
1

I’m trying to build two parallel apps inside a slide-box. This means the user should be able to use the slide-box to easily switch between the two apps while the apps maintain their (separate) state and navigation history. The setup I currently have is described below:

<ion-content>
<ion-slide-box auto-play="false" does-continue="false">
<ion-slide>
    <ion-nav-view name="main"></ion-nav-view>
</ion-slide>
<ion-slide>
    <ion-nav-view name="form"></ion-nav-view>
</ion-slide>
</ion-slide-box>
</ion-content>

This makes sure I have two different navigation stacks. However, it is unclear to me how I should construct my states in order for the two views to be displayed at the same time.

Currently my setup is this:

$stateProvider.state('app', {
        abstract: true,
        templateUrl: 'views/container.html'
 });

 $stateProvider
    .state('app.main', {
        url: "/main",
        abstract: true,
        views: {
            main: {
                templateUrl: "views/main/main.html",
                controller: 'MainController'
            }
        }
    })
    .state('app.main.list', {
        url: "/list",
        views: {
            menuContent: {
                templateUrl: "views/main/list/list.html",
                controller: 'ListController'
            }
        }
    })
    .state('app.form', {
        url: "/form",
        views: {
            form: {
                templateUrl: "views/form/form.html",
                controller: 'FormController'
            }
        }
    })

But when I use this I have to add a function which changes the state when the slide is changed:

function changeURL($index) {
    if($index==0) {
        $state.go('app.main');
    } else {
        $state.go('app.form');
    }
}

But this causes some strange behavior in my navigation stack (black screen in between the slide-boxes when the URL changes). The question can be summarized as trying to mimic the behavior of the tabs directive with the slidebox. How can this be done?

2

How did you solve this? I’m in the exact same situation.

3

Well, i’m walking the same path as you