Ionic Back Button not displaying in TAB Page and animation is missing

Question

I have a problem with displaying back button and smooth transition into tabbed page after button click from main menu of the app.

If i'm redirection to the simple view after button click:

NON-TABBED-VIEW (works fine)

  .state('dailystats', {
          url: '/daily-stats',
          views: {
              '': {
                  templateUrl: 'templates/daily-stats/daily-stats.html',
                  controller: 'DailyStatsCtrl'
              }
          }
    })

Is transition and back button displayed correctly.

But if I want to go on tabbed page after tap on button in home page in redirected without animation and without possibility to get back to home page using the back left arrow icon in header of tabbed page.

How can i add transition and back button into these tabbed views?

I tried to find any solution (using script templates, etc) but without luck.

Many Thanks for any help.

TABBED-VIEW (not working animation and back arrow)

 .state('tabplannedcalls', {
      url: "/tabplannedcalls",
      abstract: true,
      templateUrl: "templates/tabs/planned-calls.html"
    })
    .state('tabplannedcalls.list', {
          url: '/list',
          views: {
              'tab-planned-calls-list': {
                  templateUrl: 'templates/call-planning/list.html',
                  controller: 'PlannedCallsCtrl'
              }
          }
    })
    .state('tabplannedcalls.new', {
          url: '/new',
          views: {
              'tab-new-planned-call': {
                  templateUrl: 'templates/call-planning/new-planned-call.html',
                  controller: 'PlannedCallsCtrl'
              }
          }
     })

Tab Template:

<ion-tabs class="tabs-positive  tabs-icon-top" animation="slide-left-right">
  <!-- List of planned calls tab-->
  <ion-tab title="List" icon="icon ion-home" href="#/tabplannedcalls/list" >
    <ion-nav-view name="tab-planned-calls-list"></ion-nav-view>
  </ion-tab>

    <!--New planned call tab-->
  <ion-tab title="New planned call" icon="icon ion-gear-b" href="#/tabplannedcalls/new">
    <ion-nav-view name="tab-new-planned-call"></ion-nav-view>
  </ion-tab>
</ion-tabs>

List template included in tab:

<ion-view title="Planned calls">
  <ion-content class="padding" >
      <!--WRITEOUT OVERAL STATS FOR DAYS -->
      <div class="list" ng-controller="PlannedCallsCtrl"  >
          <div class="item item-button-right" ng-repeat="plannedCallItem in plannedCalls">
              {{plannedCallItem.contact_name}}
              <button class="button button-positive">
                  <i class="icon ion-ios7-telephone"></i>
              </button>
          </div>
      </div>

  </ion-content>
</ion-view>

bocong bocong · Accepted Answer · 2015-08-25T00:02:37

This is a bug and still not resolved. https://github.com/driftyco/ionic/issues/2997

I think the workaround is to implement your own tab view just by using the css styling.

Ionic Back Button not displaying in TAB Page and animation is missing

2 Answers