Nav-view: how to change state and determine the history

ionic-v1
1

I wanna do a simple app with the following structure but I am struggling of how to implement the views/view structure with <nav-view> or <ui-view> respectivel. It’s hard to explain the problem but I hope it becomes clear with the diagram and the explanations…

There are two main views:

tabs.list

A view with two children-views:

  • tabs.list.new
  • tabs.list.details
    In ‘tabs.list’ you have a list. In the view “tabs.list.new” you can insert new items on the list. In the view “tabs.list.detail” you can see details of the inserted items.

tabs.suggestions

A simple view with one children-view:

  • tabs.suggestions.details

You have a list with suggestions for what you could put on your list. You click on a suggestion and you get some details. On the “suggestions.details” view you have the functionality to go to directly to the ‘tabs.list.new’ view and the input field is already filled with the suggestion (red arrow).
As soon as I am directed to the ‘tabs.list.new’ view the history should behave as if I came from the state ‘tabs.list’ (click on the back button brings me back to “tabs.list” view).

What is the parameter for $state.go in order to redirect me form the view “tabs.suggestions.detail” to “tabs.list.new” while keeping the history as I wanted?

2

Take a look at this and see if it helps clarify the options :

http://sudostack.com/side-menus-in-the-ionic-framework/

3

Thanks. That’s a good read but it doesn’t helped me to solve the problem unfortunately.

4

Inside of your app.js, this is where you configure your routing. You have states that you navigate between.

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

type that, then list your states. Don’t use commas to separate states, just close your parentheses and start the next one.

  .state('tab.new', {
url: '/new',
views: {
  'tab-list': {
templateUrl: 'templates/tab-new.html',
controller: 'NewCtrl'
  }}})

.state(‘tab.detail’, {
url: ‘/detail’,
views: {
‘tab-list’: {
templateUrl: ‘templates/tab-detail.html’,
controller: ‘DetailCtrl’
}}})