CODEWITHSUNDEEP
javascripthtmlionic-framework
Flock Dawson
Flock Dawson

Reputation: 1878

Ionic navigation issue using the ion-nav-back-button

I have a Ionic app based on the tabs template. The general navigation structure of my app is:

-- users (/users)
    -- user (/users/[id])
-- todos (/todos)
    -- todo (/users/[id])
-- settings (/settings)

There are some nested views there (user and todo). They appear in the same nav view, like so:

<ion-tabs class="tabs-icon-only tabs-color-assertive">
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/users">
    <ion-nav-view name="users-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/todos">
    <ion-nav-view name="todos-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab icon="ion-ios-pulse-strong" href="#/tab/settings">
    <ion-nav-view name="settings-tab"></ion-nav-view>
  </ion-tab>     
</ion-tabs>

With states being defined thusly:

  .state('tabs', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  .state('users', {
    url: '/users',
    views: {
      'users-tab': {
        templateUrl: 'templates/tab-users.html',
        controller: 'UsersCtrl'
      }
    }
  })
  .state('tabs.user', {
    url: '/users/:userId',
    views: {
      'users-tab': {
        templateUrl: 'templates/user-detail.html',
        controller: 'UserCtrl'
      }
    }
  })
  .state('todos', {
    url: '/todos',
    views: {
      'todos-tab': {
        templateUrl: 'templates/tab-todos.html',
        controller: 'TodosCtrl'
      }
    }
  })
  .state('tabs.todo', {
    url: '/todos/:todoId',
    views: {
      'todos-tab': {
        templateUrl: 'templates/todo-detail.html',
        controller: 'TodoCtrl'
      }
    }
  })
  .state('tab.settings', {
    url: '/settings',
    views: {
      'settings-tab': {
        templateUrl: 'templates/tab-settings.html',
        controller: 'SettingsCtrl'
      }
    }
  })

In my index.html file, I have the following:

<ion-nav-bar class="bar-light">
  <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>

I make use of the ion-nav-back-button to handle de master-detail views users and todos. This works completely automatically and Ionic handles this very well. Except for one case. When I refer to a detail view of a todo (e.g. /todos/3) from within another view (e.g. users/1), the back button does not appear, and there is no way to go back to the todos overview (/todos). A click on the tab button has no effect but going to /todos/3).

I guess this is expected behavior, but is there any way to show the back button anyway, or to make the tab button go to the todos view (/todos) at all times?

Upvotes: 0

Views: 164

Answers (1)

Flock Dawson
Flock Dawson

Reputation: 1878

I found a solution. It's not ideal, but it works. Instead of going directly to the detail state:

$state.go('tabs.todos', {
    id: 1
});

I first go to the master state, and in the promise I go to the detail state:

$state.go('tabs.todos').then(function() {
    setTimeout(function() {
        $state.go('tabs.todos', {
            id: 1
        });
    }, 100);
});

The timeout is not strictly necessary, but I've found that sometimes it fails without it.

Upvotes: 0

Related Questions