Ionic ion-navigation view inside slide

I am trying to create two parallel applications inside a slidebox. This means that the user should be able to use the slide box to easily switch between the two apps, while the apps retain 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 will ensure that I have two different navigation stacks. However, it is not clear to me how I should construct my states to display two views at the same time.

Currently my setup is like 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 need to add a function that changes state when the slide changes:

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

      

But this is causing strange behavior on my navigation stack (black screen between sliders when url changes). The question can be summarized as an attempt to mimic the behavior of a directive tabs

with slidebox

. How can this be done?

+3


source to share





All Articles