ion-nav-back-button present, but not working

Question

I have a following problem with routing in my ionic app:

I have a nested view inside options so I can use inheritance in my routing, but what happens when I get inside the security tab is, that ion-nav-back-button doesn't work at all, although it's shown in my nav bar.

I'm new to ionic, any advise would be appreciated, thanks

app.config

$stateProvider

.state('layout', {
     abstract: true,
     templateUrl: 'views/menu.html'
})

.state('layout.options', {
     views: {
        'menuContent': {
            templateUrl: 'views/options.html'
        }
     }
})

.state('layout.options.security', {
     views: {
         'myView': {
             templateUrl: 'views/security.html',
         }
     }
})

menu.html

<ion-side-menu-content>

    <ion-nav-bar class="bar-stable">

        <ion-nav-back-button>
        </ion-nav-back-button> 

        <ion-nav-buttons side="left">
           ...
        </ion-nav-buttons>

    </ion-nav-bar>

    <ion-nav-view name="menuContent"></ion-nav-view>

</ion-side-menu-content>

options.html

<ion-nav-view name="myView">
    <ion-view title="Options">
       <ion-content>
       ...
       </ion-content>
    </ion-view>
</ion-nav-view>

security.html

<ion-view title="Security">
    <ion-content>
       ...
    </ion-content>
</ion-view>

it seems like something is wrong with the way I'm nesting those views, because I can't even access layout.options with ui-sref — matt93

matt93 matt93 · Accepted Answer · 2016-06-09T17:07:35

I've "solved" my problem by not nesting the security.html inside the options.html

so currently I have

.state('layout.security', {
     views: {
         'menuContent': {
             templateUrl: 'views/security.html',
         }
     }    
})

I feel this is not the right solution, but I got to make it work. Please, if you have solution / reason, why the previous code doesn't work, share

thanks

ion-nav-back-button present, but not working

1 Answers