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
angularjs angular-ui-router ionic-framework


source to share


No one has answered this question yet

Check out similar questions:

6
AngularJS: UI-router WARNING: Tried loading angular more than once
1
Angularjs: How to use $ state.go () to redirect to views of the same state?
1
ui-router changes url but doesn't load template angular-ui-router + ionic 1 +
0
ionic, $ state.go does not change its appearance
0
Ionic ion-side menu creates blank page combined with ui-router child states
0
this piece of documentation on ion-navaid layout doesn't make sense to me
0
AngularJS. Templates are not included in u-views when transitioning between child states of different abstract parents
0
ion-tabs flashes the previous view on Android
0
Show login screen on top instead of ion-nav-view
0
Picture



All Articles
Loading...
X
Show
Funny
Dev
Pics