How can I route to a specific (sub)-view or change the view?

ionic-v1
1

I’ve created a state with multiple views. Can you tell me how to route to a specific view?

app.js:

.state('tabs.movies', {
  url: '/movies',
  views: {
    'movies-tab': {
    templateUrl: 'templates/movies.html',
    controller: 'MoviesCtrl'
  },
  'movies-tab-grid': {
    templateUrl: 'templates/movies_grid.html',
    controller: 'MoviesCtrl'
  },
  'movies-tab-list': {
    templateUrl: 'templates/movies_list.html',
    controller: 'MoviesCtrl'
  }
}
  })

The three (sub) views are about to show the same content but with different layouts (Slides, Grid, List). I also tried to use ng-switch / ng-if, but whenever I wrap my carousel (ks-swiper-container) with a div-container, it completely disappears. So I thought routing might be the better way.

I would then like to create a button to switch the (sub) views like this:

<ion-nav-buttons side="secondary">
  <button class="button button-icon ion-grid" ng-click="">    
  </button>
</ion-nav-buttons>

I know that routing can be done in several ways (e.g. with a href) but I have no idea how to route to a view instead of a specific state or route to a state showing a specific view.

Any help is much appreciated!
Thanks in advance.

2

You are misunderstanding views. A view is an area of the screen where your content is displayed. It can cover the 100% of the screen, or cover part of the screen and have multiple views on one screen.

What you want to do instead of having several views, is to use nested states.

Then you can use ui-sref to link to that.

3

Thank you very much for the new insight. I really misunderstood the state/view concept. :slight_smile:

I tried it with nested states, but I think it isn’t really the right thing for me, as the grid and list layout-states shouldn’t be nested states as there should not be any deeper-navigation hierarchy, I think.

With nested states it looks like this:

Movies (Slides)§ -> Movie Details (1. Ch)

Movies (Slides)§ -> Movies List (back-navigation)(1.Ch) -> Movie Details (1. Ch of P)

Movies (Slides)§ -> Movies Grid (back-navigation)(1. Ch) -> Movie Details (1. Ch of P)

instead it should be:

Movies (Slides)§ -> Movie Details (1. Ch)

Movies (List)§ -> Movie Details (1. Ch)

Movies (Grid)§ -> Movie Details (1. Ch)

§ = Parent State
(n. Ch) nth Child State

So, either I use ngIf/ngSwitch or 3 seperate states on the same hierarchical level. But what about “Movie Details” then? Would I need 3 separate states for that too? Because “Movie Details” is predestinated to be a nested state. But then again, a nested state of which of the three states? I begin to believe that Mike was absolutely right with the ngIf/ngSwitch hint. But at least I could dive deeper into the routing of ionic. :slight_smile:

What do you think?