Ionic Sidemenu 调用 TABS 页面

Question

我正在尝试创建一个具有 sidemenu 的 ionic 应用程序，而 sidemenu 将包含一组菜单，其中一些将调用到 TABS 页面，而另一些将调用到普通页面。

我能够创建侧边菜单及其从另一个普通页面调用到另一个普通页面的功能，但是我被困在将调用 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>

Answer 1

使用<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

同时删除ion-tab 的href 属性并在其中添加一些内容。你的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">
    <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>