Ionic - Das Seitenmenü NUR in konkreten Seiten anzeigen

Ich entwickle eine App mit Ionic Framework, und ich möchte nur ein Seitenmenü in einigen konkreten Ansichten zeigen, aber nicht in jeder Ansicht.Ionic - Das Seitenmenü NUR in konkreten Seiten anzeigen

Ich habe meine menu.html Datei:

<ion-side-menus> 

    <ion-pane ion-side-menu-content> 
    <ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> 
    </ion-pane> 

    <ion-side-menu side="left"> 

    <ion-content class="mymenu"> 

     <div id="menu-list"> 
     <ion-list class="list"> 
      <ion-item item-type="item-icon-left" nav-clear menu-close href="#"> 
      <i class="icon ion-home"></i><span>Menu Item</span> 
      </ion-item> 
      ... 
     </ion-list> 
     </div> 

    </ion-content> 

    </ion-side-menu> 

</ion-side-menus>

Meine index.html 's Body-Tag sieht genauso aus wie folgt aus:

<body ng-app="myApp"> 
    <ion-nav-view></ion-nav-view> 
</body>

Und die JavaScript Code, wo ich meine App states:

.config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
     .state('app', { 
      url: "/app", 
      abstract: true, 
      templateUrl: "templates/menu.html", 
      controller: 'AppCtrl' 
     }) 

     .state('app.page1', { 
      url: "/page1", 
      views: { 
       'menuContent' :{ 
        templateUrl: "templates/page1.html" 
       } 
      } 
     }) 

     .state('app.page2', { 
      url: "/page2", 
      views: { 
       'menuContent' :{ 
        templateUrl: "templates/page2.html" 
       } 
      } 
     }) 

     // etc... 

     // if none of the above states are matched, use this as the fallback 
     $urlRouterProvider.otherwise('/app/page1'); 
    });

page1.html und page2.html beide enthalten die folgende Struktur:

<ion-view title="something"> 
    <ion-content> 
     ... // here comes the html content of the page 
    </ion-content> 
</ion-view>

Was kann ich eigentlich nur tun, um meine Seite-Menü (menu.html) auf zu zeigen page1.html und nicht auf page2.html ?? Gibt es etwas, was ich vermisse?

Gibt es eine Möglichkeit, den menu.html Inhalt nur zum Einfügen auf diesen Seiten will ich es, den Staat zu erscheinen und zu vergessen, über das Erstellen, die es als templateUrl verwendet?

Quelle

2014-11-22 charliebrownie

Der Grund, warum all Ihre Seiten Seitenmenü haben, ist, weil Sie "App" als ihren Elternstatus angeben. Wenn ein Status aktiviert ist, werden seine Vorlagen automatisch in die Vorlage <ion-view> des übergeordneten Status eingefügt. Wenn es sich um einen Zustand auf oberster Ebene handelt, weil es keinen übergeordneten Status hat, lautet die übergeordnete Vorlage index.html. Der Status app enthält das Seitenmenü.

Der Code sollte wie folgt aussehen:

config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
     .state('app', { 
      url: "/app", 
      abstract: true, 
      templateUrl: "templates/menu.html", 
      controller: 'AppCtrl' 
     }) 

     //this state has the 'app' state (which has the sidemenu) as its parent state 
     .state('app.page1', { 
      url: "/page1", 
      views: { 
       'menuContent' :{ 
        templateUrl: "templates/page1.html" 
       } 
      } 
     }) 

     //this state has no parent, so it uses 'index.html' as its template. The index page has no 
     //sidemenu in it 
     .state('page2', { 
      url: "/page2", 
      templateUrl: "templates/page2.html" 
      } 
     }) 

     ///more code here 
    });

Check out https://github.com/angular-ui/ui-router/wiki

Quelle

2014-11-23 06:35:45

Vielen Dank Akinkunle Allen, ich war misstrauisch, dass etwas passierte, weil 'app' der Elternstaat von jedem Staat war, aber nicht wusste, wie man es löst - das ist meine allererste Erfahrung mit dem Ionic Rahmen. Grüße! – charliebrownie

Cheers @charliebrownie Ich bin froh, dass ich helfen konnte –

Sobald ich den "App" Zustand ändere, beginnt meine Seite index.html als Elternteil zu behandeln und hört auf zu lesen, was in dem HTML ist, das ich rufe. Irgendeine Idee? \t // LOGIN \t.Zustand ('login', { \t \t url: '/ login', \t \t \t Ansichten: { \t \t \t 'menuContent': { \t \t \t \t templateUrl: 'templates/login.html' \t \t \t} \t \t} \t}) –

, wenn Ihr Problem einfach ist, verwenden

onExit: function(){ 
    angular.element(document.querySelector('#menuAPP')).removeClass('hidden'); 
}

in den Zustand

Quelle

2015-06-30 11:34:43

nur hide-nav hinzufügen -bar = "Wahr" in Ionenansicht

Quelle

2016-06-28 09:07:13 user6522428

Ionic - Das Seitenmenü NUR in konkreten Seiten anzeigen

Antwort

Verwandte Themen