Creating views outside ion-tabs on Ionic Framework

Question

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:

_{(source: ionicframework.com)}

What should be the right approach for this?

Answer 1

This is my first time answering a question here so please bear with me.

To navigate to a view without the tab bar: Remove the "app" prefix from the settings state, so it is no longer a child to the parent abstract state (app).

.state('settings', {
        url: '/settings',
        views: {
          'settings': {
            controller: 'ui/modules/settings/ctrl.js',
            templateUrl: 'ui/modules/settings/view.html'
          }
        }
      }); 

**If you add any states after this one, be sure to delete semicolon, whereas semicolon denotes the end.

THAT IS A BAND-AID SOLUTION.
The full solution to your problem is to start with an ionic project template. Fortunately they have a tabs option, which is a global tab bar.

Command-line: ionic start appName tabs

That should give you a proper starting template with everything you need. It also has sample controllers.js, services.js, and app.js files so you can just build from there. It will also help you structure your project correctly to prevent unexpected data from injecting into your tag.

Source 1: http://ionicframework.com/getting-started/
Source 2: http://ionicframework.com/docs/api/directive/ionNavView/

**Bonus: There is also a neat trick in source 2 that shows you how to keep all templates inside your index.html file to speed up the app and simplify your workflow.

Goodluck.