How can I link to a tabbed screen from a dashboard button and maintain navigation history?


#1

I’m creating an app with the initial view being a dashboard containing several buttons which link to tabbed screens. The buttons are linked to the tabbed screens using:

ui-sref="tab.scanner"

The problem with this is the navigation history (back button) doesn’t seem to work unless I go to that screen using the actual tab bar link. The Back button does not display when I link to the screen from the dashboard but it does display when I navigate to a different tab then back to the same tab. By linking to the tabbed screen from outside of the tab bar, it seems like the navigation history isn’t activated unless I actually use the tab bar.

Here’s an example of my states:

.state('dash', {
    url: '/dash',
    templateUrl: 'templates/dash.html',
    controller: 'DashCtrl'
})

.state('tab.scanner', {
    url: '/scanner',
    views: {
        'tab-scanner': {
            templateUrl: 'templates/tab-scanner.html',
            controller: 'ScannerCtrl'
        }
    }
})

.state('tab.scanner-confirmation', {
    url: '/scanner-confirmation',
    views: {
        'tab-scanner': {
            templateUrl: 'templates/scanner-confirmation.html',
            controller: 'ScannerConfirmationCtrl'
        }
    }
})

When I navigate from dash to scanner, I don’t require a back button because I use a hard-coded link back to the dashboard. When I navigate from scanner to scanner-confirmation the back button does not display unless I switch to a different tab, then back to the scanner tab. After I’ve done that, the back button works every time, it just doesn’t work the first time I navigate to the scanner-confirmation screen prior to using a link on the tab bar.

Is it possible to link to a tabbed page from a dashboard button while using the navigation history for tabbed screens?

I’m using the tabbed app template created by Ionic as the basis for the app.

Many thanks