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?