Tab bar not working, please help!


#1

Hey guys,

I’m having a strange problem with my tab bars.

It works perfectly in browser but not on device simulators. I think that it’s maybe some cache of simulator, because when I reset content and settings of iOS simulator it works well. But when I build it again doesn’t work…

As you can see in the gif below it’s only loading the first active tab and when I try to click another one it doesn’t work.

Here is my code:

  $stateProvider
  // setup an abstract state for the tabs directive
  .state('tabs', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  .state('tabs.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })
  .state('tabs.search', {
    url: '/search',
    views: {
      'tab-search': {
        templateUrl: 'templates/tab-search.html',
        controller: 'SearchCtrl'
      }
    }
  })
  .state('tabs.profile', {
    url: '/profile',
    views: {
      'tab-profile': {
        templateUrl: 'templates/tab-profile.html',
        controller: 'ProfileCtrl'
      }
    }
  });

<ion-tabs class="tabs-icon-top tabs-color-active-assertive light ">

    <!-- Profile Tab -->
  <ion-tab title="Busca" icon-off="ion-search" icon-on="ion-search" href="#/tab/search">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  <!-- Profile Tab -->
  <ion-tab title="Perfil" icon-off="ion-person" icon-on="ion-person" ui-sref="tabs.profile">
    <ion-nav-view name="tab-profile"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Interesses" icon-off="ion-chatbubble-working" icon-on="ion-chatbubble-working" ui-sref="tabs.account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Does anyone know what it can be?

Thank you!


#2

just try like this
step1;inject $ionicConfigProvider in the .config on app.js and
add $ionicConfigProvider.tabs.position(‘bottom’);
step2: i thing you are using the tabs ui in tabs.html
else
just copy the tabs settings to the tabs.html file

your tabs content
<``/ion-tabs>
step3:make sure that your using default view
like $urlRouterProvider.otherwise(‘tabs/profile’);


#3

I’ve done this and doesn’t work too. :frowning:


#4

I think that it’s maybe some cache of simulator, because when I reset content and settings of iOS simulator it works well. But when I build it again doesn’t work…