Ui router multiple nested $state with side menus and tabs

ionic-v1
1

first thing i have a top abstract side menu, that is all my features reside.

$state 'menu',
    url: '/menu'
    abstract: true
    template: getTemplate 'menu'
    controller: 'menuCtrl'

then i have nested $state like

'menu.notes', 'menu.todos', 'menu.profile', etc...

then i want different tabs in those particular view
each of those features like ‘menu.note’ may have tabs inside it, then i’ve got my “/notes” $state like…

$state 'menu.notes',
    url: '/notes'
    abstract: true
    template: getTemplate 'notesTabs'
    controller: 'notesCtrl'

$state 'menu.notes.latest'
$state 'menu.notes.important'
$state 'menu.notes.sticky'

but for this one ‘menu.notes.view’ i don’t want the fourth tab show

i just can’t make the note view show without the fourth tab.

$state 'menu.notes.view'
    url: '/view/:_id'

<template name="notesTabs">

	<ion-tabs class="tabs-icon-top tabs-secondary">

		<ion-tab title="latest notes" icon="ion-compose" ui-sref="menu.notes.latest">
			<ion-nav-view name="latest"></ion-nav-view>
		</ion-tab>

		<ion-tab title="important notes" icon="ion-alert" ui-sref="menu.notes.important">
			<ion-nav-view name="important"></ion-nav-view>
		</ion-tab>

		<ion-tab title="sticky notes" icon="ion-pin" ui-sref="menu.notes.sticky">
			<ion-nav-view name="sticky"></ion-nav-view>
		</ion-tab>

                    // why should i have this ? without this i can't show note detail/view
		<ion-tab title="view" icon="ion-eye">
			<ion-nav-view name="view"></ion-nav-view>
		</ion-tab>

	</ion-tabs>

</template>

<template name="latestNotes">

	<ion-view title="my notes - latest" hide-back-button="true">
		<ion-content>

			<ion-nav-buttons side="left">
				<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
			</ion-nav-buttons>

			<ion-nav-buttons side="right">
				<button class="button button-icon icon ion-compose" ng-click="openNoteModal()"></button>
			</ion-nav-buttons>

			<div class="list">
				<div class="item item-divider">sticky</div>
				<a class="item" ng-repeat="note in Notes | filter: { sticky: true} | limitTo: 3" ui-sref="menu.notes.view({ _id: note._id })">
					<p>[[note.title]]</p>
					<p>[[note._id]]</p>
				</a>
				<div class="item item-divider">latest</div>
				<div class="card" ng-repeat="note in Notes">
					<div class="item item-divider" ng-show="note.title">[[note.title]]</div>
					<div class="item item-text-wrap">
						<p>[[note.content]]</p>
					</div>
				</div>
			</div>

		</ion-content>
	</ion-view>

</template>
1 Like