CODEWITHSUNDEEP
angularjsionic-framework
Joseph
Joseph

Reputation: 733

Ionic Sidemenu call to TABS page

I am trying to create an ionic's app that will have sidemenu, whereas the sidemenu will consist a set of menus that some of them will call to a TABS page and some will to normal page.

I am able to create the sidemenu as well as its function to call from another normal page to another normal page, however i am stuck with menu that will call to a TABS page. TABS page will be shown but without any content in each tab.

Anyone can help me?

This is some of codes.

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-royal">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon  button-small" menu-toggle="left"></button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-royal">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/fg-tabs">
          <i class="icon ion-cube"></i>
          Product
        </ion-item>
      </ion-list>
      </ion-content>
  </ion-side-menu>
</ion-side-menus>

app.js

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'MenuCtrl'
  })
  .state('app.fg-tabs', {
    url: "/fg-tabs",
    views: {
      'menuContent': {
        templateUrl: "templates/fg/fg-tabs.html",
      }
    }
  })
.state('app.fg-in', {
    url: "/fg-in",
    views: {
      'menuContent': {
        templateUrl: "templates/fg/fg-in.html",
        controller: 'FGinListCtrl'
      }
    }
  })

fg-tabs.html

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

  <ion-tab title="IN" icon-on="ion-arrow-down-a" icon-off="ion-arrow-up-a" href="#/app/fg-in">
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-tab>

  <ion-tab title="OUT" icon-on="ion-arrow-up-a" icon-off="ion-arrow-up-a" href="#/app/fg-out">

    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="ENQUIRY" icon-on="ion-document-text" icon-off="ion-document-text" href="#/app/fg-scanner-out">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>

Upvotes: 0

Views: 122

Answers (1)

Devidas Kadam
Devidas Kadam

Reputation: 944

use <ion-item menu-close ui-sref="app.fg-tabs"> <i class="icon ion-cube"></i> Product </ion-item>

insted of <ion-item menu-close href="#/app/fg-tabs"> <i class="icon ion-cube"></i> Product </ion-item>

for more information please read this

Also remove href attribute of ion-tab and add some content in it. your fg-tabs.html will be

<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="IN" icon-on="ion-arrow-down-a" icon-off="ion-arrow-up-a">
    <ion-nav-view name="menuContent">
        Tab content 1
    </ion-nav-view>
</ion-tab>
<ion-tab title="OUT" icon-on="ion-arrow-up-a" icon-off="ion-arrow-up-a">
    Tab content 2
</ion-tab>
<ion-tab title="ENQUIRY" icon-on="ion-document-text" icon-off="ion-document-text">
    Tab content 3
</ion-tab>

Upvotes: 0

Related Questions