2016-04-19 38 views
0

我正在尝试创建一个离子的应用程序,它具有sidemenu,而sidemenu将包含一组菜单,其中一些菜单将调用TABS页面,一些菜单将打开到普通页面。Ionic 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> 
+0

我前一段时间遇到了类似的问题,但在我的情况下,错误是因为我已经把''标签内的另一个。乍一看,我能想到的唯一情况是'fg-tabs.html'内容似乎不在'离子视图'中。不知道这是否重要,tbh。无论如何,检查我的[问题](http://stackoverflow.com/questions/30579219/ionic-side-menu-and-tabs-with-nested-views-content-of-tab-nested-views-not-show)和它收到的答案。希望这可能会给你一些线索。 –

+0

fg-tabs.html应该在'ion-view'包装内,因为它具有'menuContent'的视图,其中'menuContent'在这一行'' –

+0

如果我把内容代码直接放在每个''里面,那么它会显示出来,但是如果我使用模板则不会显示。 –

回答

0

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

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

的更多信息,请阅读this

同时删除的ion-tabhref属性,并在其中添加一些内容。您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> 

+0

谢谢,学到了一些新东西,但它并没有回答我上面的问题。 –

+0

请查看更新后的答案 –

+0

为什么我不能使用模板作为每个标签的内容? –