2016-04-07 5 views
0

Ich habe eine Ionic App, die auf der Tabulatorvorlage basiert. Die allgemeine Navigationsstruktur meiner App lautet:Ionisches Navigationsproblem mit der Ionennavigationstaste

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

Dort sind einige verschachtelte Ansichten (Benutzer und Todo). Sie erscheinen in der gleichen nav Ansicht, etwa so:

.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 meiner Datei index.html, ich habe folgendes:

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

<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> 

Mit Staaten thusly definiert ist Ich benutze die Ion-Nav-Back-Taste, um Master-Detail-Ansichten Benutzer und Todos zu behandeln. Das funktioniert völlig automatisch und Ionic geht damit sehr gut um. Bis auf einen Fall. Wenn ich in einer anderen Ansicht (z. B. Benutzer/1) auf eine Detailansicht eines Todos (z. B./todos/3) verweise, wird der Zurück-Button nicht angezeigt, und es gibt keine Möglichkeit, zur Todos-Übersicht (/ Todos) zurückzukehren). Ein Klick auf die Tab-Schaltfläche hat keine Wirkung, sondern geht nach/todos/3).

Ich denke, das ist ein erwartetes Verhalten, aber gibt es irgendeine Möglichkeit, die Zurück-Schaltfläche trotzdem zu zeigen, oder die Tab-Schaltfläche jederzeit auf die Todos-Ansicht (/ Todos) zu setzen?

Antwort

0

Ich fand eine Lösung. Es ist nicht ideal, aber es funktioniert. Statt direkt zum Detail Zustand gehen:

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

ich zuerst zum Master-Zustand, und in dem Versprechen, Ich gehe ins Detail Zustand:

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

Der Timeout ist nicht unbedingt notwendig, aber ich habe festgestellt, dass es manchmal ohne es scheitert.

Verwandte Themen