Beta 8 Breaks my header tabs


#1

I have a “fake” tab bar in my header that has been working up until beta 8 was released today. Upon updating my libraries to beta 8, when I tap on the button in the header now, the entire header bar disappears. Not sure what changed in beta 8 to cause this, but I have reverted back until I can figure out a fix.

Here is my header code:

<ion-header-bar align-title="center" class="bar-dark">
  <div class="buttons">
    <a class="button button-icon button-clear ion-navicon" href="#/app/menu"></a>
  </div>
  <h1 class="title locations-toggle-wrap">
    <a nav-clear class="button button-icon button-clear ion-map" ng-class="{active:isActive('/app/loc/map')}" href="#/app/loc/map"></a>
    <a nav-clear class="button button-icon button-clear ion-ios7-more" ng-class="{active:isActive('/app/loc/all')}" href="#/app/loc/all"></a>
  </h1>
</ion-header-bar>

#2

Not sure what could be the issue, you should check the change long though


#3

Tracked it down. It was the change in commit 53c17104. If I manually reverse that particular change on my end, it works the way I anticipate. Not sure how to move forward now though. I’d like to stay up with Ionic updates as my project is still evolving but it is too complicated to put up on CodePen or anything of the sort to ask you to look at it for me.

I posted my header earlier, here is my entire router config:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "app.html"
    })

    .state('app.menu', {
      url: "/menu",
      views: {
        'menuContent' :{
          templateUrl: "templates/menu.html",
          controller: function($scope){
            $scope.aboutBroughtBy = "The City of Riverside's Historic Preservation, Neighborhoods and Urban Design Division, and Economic Development Department";
          }
        }
      }
    })

    .state('app.favorites', {
      url: "/favorites",
      views: {
        'menuContent' :{
          templateUrl: "templates/favorites.html",
          controller: "SettingsCtrl"
        }
      }
    })

    .state('app.visited', {
      url: "/visited",
      views: {
        'menuContent' :{
          templateUrl: "templates/visited.html",
          controller: "SettingsCtrl"
        }
      }
    })

    .state('app.settings', {
      url: "/settings",
      views: {
        'menuContent' :{
          templateUrl: "templates/settings.html",
          controller: "SettingsCtrl"
        }
      }
    })

    .state('app.loc', {
      url: "/loc",
      abstract: true,
      views: {
        'menuContent': {
          templateUrl: 'locations-wrap.html'
        }
      }
    })
    .state('app.loc.all', {
      url: '/all',
      views: {
        'locContent': {
          templateUrl: 'templates/locations-list.html',
          controller: 'LocationsCtrl'
        }
      }
    })
    .state('app.loc.map', {
      url: '/map',
      views: {
        'locContent': {
          templateUrl: 'templates/locations-map.html',
          controller: 'LocationsMapCtrl'
        }
      }
    })

    .state('app.loc.detail', {
      url: "/:locationId",
      abstract: true,
      controller: 'LocationDetailCtrl',
      views: {
        'locContent': {
          templateUrl: 'templates/detail/loc.detail.view.html',
          controller: 'LocationDetailCtrl'
        }
      }
    })
    .state('app.loc.detail.detail', {
      url: '/detail',
      views: {
        'tab-loc-detail': {
          templateUrl: 'templates/detail/location-details.html',
          controller: 'LocationDetailCtrl'
        }
      }
    })
    .state('app.loc.detail.tour', {
      url: '/tour',
      views: {
        'tab-loc-tour': {
          templateUrl: 'templates/detail/location-tours.html',
          controller: 'LocationDetailCtrl'
        }
      }
    })
      .state('app.loc.detail.tour-video', {
        url: '/tour/v/:tourId',
        views: {
          'tab-loc-tour': {
            templateUrl: 'templates/detail/location-tours-videoplayer.html',
            controller: 'LocationDetailCtrl'
          }
        }
      })

      .state('app.loc.detail.tour-audio', {
        url: '/tour/a/:tourId',
        views: {
          'tab-loc-tour': {
            templateUrl: 'templates/detail/location-tours-audioplayer.html',
            controller: 'LocationDetailCtrl'
          }
        }
      })
    .state('app.loc.detail.image', {
      url: '/image',
      views: {
        'tab-loc-image': {
          templateUrl: 'templates/detail/location-gallery.html',
          controller: 'LocationDetailCtrl'
        }
      }
    })
      .state('app.loc.detail.image-view', {
        url: '/image/v/:imageId',
        views: {
          'tab-loc-image': {
            templateUrl: 'templates/detail/location-gallery-view.html',
            controller: 'LocationDetailCtrl'
          }
        }
      })
    .state('app.loc.detail.map', {
      url: '/map',
      views: {
        'tab-loc-map': {
          templateUrl: 'templates/detail/location-map.html',
          controller: 'LocationDetailCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/loc/all');
})

Here are some of my templates that are relevant:

    <div ng-controller="MainCtrl">
      <ion-nav-view></ion-nav-view>
    </div>

    <script id="app.html" type="text/ng-template">
      <ion-nav-bar class='nav-title-slide-ios7 bar-dark'>
        <ion-nav-back-button class='button-icon ion-ios7-arrow-left'>
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view name='menuContent'></ion-nav-view>
    </script>
    
    <script id="locations-wrap.html" type="text/ng-template">
      <ion-view>
        <ion-nav-view name='locContent' scroll="false"></ion-nav-view>
      </ion-view>
    </script>

and the header that is disappearing again:

<ion-header-bar align-title="center" class="bar-dark">
  <div class="buttons">
    <a class="button button-icon button-clear ion-navicon" href="#/app/menu"></a>
  </div>
  <h1 class="title locations-toggle-wrap">
    <a nav-clear class="button button-icon button-clear ion-map" ng-class="{active:isActive('/app/loc/map')}" href="#/app/loc/map"></a>
    <a nav-clear class="button button-icon button-clear ion-ios7-more" ng-class="{active:isActive('/app/loc/all')}" href="#/app/loc/all"></a>
  </h1>
</ion-header-bar>

Thanks again for your help!