CODEWITHSUNDEEP
ionic-framework
brayancastrop
brayancastrop

Reputation: 381

Ionic navigation back button with tabs

i'm trying to make work navigation with tabs.

here is a jsfiddle with the issue: http://jsfiddle.net/brayancastrop/fgcruwxg/1/

I have a tabbed view that loads without back button or transition.

<script type="text/ng-template" id="templates/conference.html">
    <ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
        <ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
            <ion-nav-view name="conferenceInformation"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
            <ion-nav-view name="conferencePresentation"></ion-nav-view>
        </ion-tab>

    </ion-tabs>

</script>

Right now when i go to an event the back button appears correctly in the nav bar, but when i go to a conference, the back button does not appear neither the transition animation.

Maybe i'm using wrong the tabs or missing something on the abstract state but i've tried using hide-back-button in the ion-view for each tab and tried to debug if history has something to do without luck :/

Please, any guidance will be apreciated.

Upvotes: 2

Views: 6601

Answers (1)

mfink
mfink

Reputation: 1380

Looks like you have your <ion-nav-view name="conferenceInformation"></ion-nav-view> nested inside your ion-tabs, which won't work. I think it needs to be above the ion-tabs directive.

Change this:

<script type="text/ng-template" id="templates/conference.html">
    <ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
        <ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">
            <ion-nav-view name="conferenceInformation"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
            <ion-nav-view name="conferencePresentation"></ion-nav-view>
        </ion-tab>

    </ion-tabs>

</script>

to this:

<script type="text/ng-template" id="templates/conference.html">
    <ion-nav-view name="conferenceInformation"></ion-nav-view>
    <ion-tabs tabs-type="tabs-icon-only" has-header=true padding=true>
        <ion-tab title="Info" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" href="#/events/1/conferences/1/information">

        </ion-tab>

        <ion-tab title="Presentation" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline" href="#/events/1/conferences/1/presentation">
            <ion-nav-view name="conferencePresentation"></ion-nav-view>
        </ion-tab>

    </ion-tabs>

</script>

Updated jsfiddle

Upvotes: 5

Related Questions