2016-04-19 4 views
0

Ich versuche, eine ionic App zu erstellen, die Sidemenu haben wird, während das Sidemenu besteht aus einer Reihe von Menüs, die einige von ihnen auf eine TABS-Seite und einige werden auf normale Seite aufrufen.Ionic Sidemenu Anruf auf TABS Seite

Ich bin in der Lage, das Sidemenü sowie seine Funktion zu erstellen, um von einer anderen normalen Seite zu einer anderen normalen Seite zu rufen, aber ich bin mit Menü fest, das zu einer TABS-Seite aufrufen wird. Die TABS-Seite wird angezeigt, jedoch ohne Inhalt auf jeder Registerkarte.

Jeder kann mir helfen?

Dies sind einige der 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> 
+0

sind ich ein ähnliches Problem vor einiger Zeit konfrontiert, aber der Fehler in meinem Fall war, weil ich einen '' -Tag in einer anderen gebracht hatte. Auf den ersten Blick kann ich nur daran denken, dass der Inhalt von "fg-tabs.html" nicht in einer "Ionenansicht" zu sehen ist. Nicht sicher, ob das wichtig ist, tbh. Wie auch immer, überprüfe meine [Frage] (http://stackoverflow.com/questions/30579219/ionic-side-menu-and-tabs-mit-nested-views-content-of-tab-nested-views-not-show) und die Antwort, die es erhielt. Hoffentlich könnte es dir einen Hinweis geben. –

+0

Die fg-tabs.html sollte innerhalb des 'ion-view'-Wrappers liegen, da sie' menuContent' enthält, wobei der 'menuContent' in dieser Zeile steht' ' –

+0

Wenn ich den Inhaltscode direkt in jedes' 'stecke, wird es angezeigt, aber es wird nicht angezeigt, wenn ich die Vorlage verwende. –

Antwort

0

Verwendung <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>

für weitere Informationen bitte this

Entfernen Sie auch href Attribut ion-tab und fügen Sie einige Inhalte darin lesen. Ihre fg-tabs.html wird

<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

danke, lernte etwas neues, aber es beantwortet meine Frage nicht oben. –

+0

Bitte überprüfen Sie die aktualisierte Antwort –

+0

Warum kann ich die Vorlage nicht als Inhalt der einzelnen Registerkarten verwenden? –