Ionic Sidemenu致电TABS页面

时间:2016-04-19 05:46:41

标签: angularjs ionic-framework

我正在尝试创建一个具有sidemenu的离子应用程序,而sidemenu将包含一组菜单,其中一些将调用TABS页面,一些将进入正常页面。

我可以创建sidemenu及其功能,从另一个普通页面调用到另一个普通页面,但是我会遇到调用TABS页面的菜单。将显示TABS页面,但每个选项卡中没有任何内容。

任何人都可以帮助我?

这是一些代码。

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>

1 个答案:

答案 0 :(得分:0)

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

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

的内容

有关详细信息,请参阅this

同时删除href的{​​{1}}属性并在其中添加一些内容。您的ion-tab

fg-tabs.html