Having view outside ion-tabs

Hi there!

I’m new to Ionic but it’s been a long time since I wanted to try it. I’m just playing around so maybe I’m not getting the full concept.

I’m trying to do a simple application with three tabs at the bottom and a settings icon that will be there for all three tabs. When you click into that icon, supposedly the tabs should hide and show the settings screen.

Since I don’t want the user to loose any content, all the views inherit from a global one:

angular.module('app', ['ionic', 'debug']).config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
      .state('app', {
        url: "/app",
        abstract: true,
        controller: 'AppController',
        templateUrl: "ui/modules/tabs/view.html"
      })
      .state('app.compose-text', {
        url: '/text',
        views: {
          'compose-text': {
            templateUrl: 'ui/modules/text-composer/view.html'
          }
        }
      })
      .state('app.compose-draw', {
        url: '/draw',
        views: {
          'compose-draw': {
            templateUrl: 'ui/modules/draw-composer/view.html'
          }
        }
      })
      .state('app.compose-photo', {
        url: '/photo',
        views: {
          'compose-photo': {
            templateUrl: 'ui/modules/photo-composer/view.html'
          }
        }
      })
      .state('app.settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      });

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

angular.module('app').run(function($rootScope) {
});

Then, tabs/view looks like this:

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

<ion-tabs class="tabs-assertive tabs-icon-only">
  <ion-tab title="Text" icon="icon ion-ios7-compose-outline" href="#/app/text">
    <ion-nav-view name="compose-text"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Draw" icon="icon ion-edit" href="#/app/draw">
    <ion-nav-view name="compose-draw"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Photo" icon="icon ion-ios7-camera-outline" href="#/app/photo">
    <ion-nav-view name="compose-photo"></ion-nav-view>
  </ion-tab>
</ion-tabs>

And one of the views:

<ion-view title="Example" class="slide-left-right">
  <ion-nav-buttons side="left">
    <a class="button button-icon button-clear ion-ios7-gear-outline" href="#/app/settings"></a>
  </ion-nav-buttons>
  <ion-content padding="true">
    <h1>Text</h1>
  </ion-content>
</ion-view>

First thing I wonder is: Is there any way to reuse those buttons between all views? Seems useless to keep defining them over and over.

But that’s not the real thing™. When I click on Settings, something get injected into the ion-nav-view however it contains a lot of stuff (which is not on the template) and also, it doesn’t hide the other view nor the tabs.

Some screenshot:

What should be the right approach for this?

1 Like

I have the same problem.

I want to use ion-tabs, but I don’t need the content inside the ion-tab.

I try to use the HTML markup

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

<div class="tabs tabs-icon-only tabs-positive">
  <a class="tab-item" ui-sref="timeline">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item" ui-sref="busca">
    <i class="icon ion-search"></i>
  </a>
  <a class="tab-item" ui-sref="postar">
    <i class="icon ion-compose"></i>
  </a>
  <a class="tab-item" ui-sref="profile">
    <i class="icon ion-person"></i>
  </a>
</div>

But, the ion-view use a wrong height size, as if I’m not using tabs. So the content stay behind the tabs when the scroll reach the bottom.

I need to use something like this to solve my problem, but it is not possible right now

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

<ion-tabs class="tabs-positive tabs-icon-only">
  <ion-tab title="Home" icon="icon ion-home"></ion-tab>
  <ion-tab title="About" icon="icon ion-search"></ion-tab>
  <ion-tab title="Settings" icon="icon ion-compose"></ion-tab>
  <ion-tab title="Settings" icon="icon ion-person"></ion-tab>
</ion-tabs>

But, the ion-view don’t show nothing, cause is nothing inside the ion-tab

@mhartington do you have some ideia to help us?

Thanks :slight_smile:

The way I solved this was by adding a new view directly. So, in the “tabbed ones” I put something like this:

<ion-view title="My App" hide-back-button="true">
  <ion-nav-buttons side="left">
    <a class="button button-icon button-clear ion-ios7-gear-outline" href="#/app/settings"></a>
  </ion-nav-buttons>
  <ion-content padding="true" scroll="false">
    
  </ion-content>
</ion-view>

And then, on the views, it has it own state:

.state('app.settings', {
  url: '/settings',
  views: {
    'main-area' : {
      controller: 'SettingsController',
      templateUrl: 'ui/modules/settings/view.html'
    }
  }
})

And finally, the settings view:

<ion-view title="Settings" hide-back-button="false" class="slide-left-right-ios7">
  <ion-content padding="true">        
  </ion-content>
</ion-view>

Which leads to the thing I wanted! Hope it helps