2016-04-14 13 views
0

ionische Rückschaltfläche erscheint nicht in der Registerkartenansicht. Ich habe den Beispielcode in Plunker erstellt:ionische Rückschaltfläche erscheint nicht in der Registerkartenansicht

https://plnkr.co/edit/AjROKkHp50yyI9gHPNp8?p=preview

ich die signin und Anmeldung Seiten in der Registeransicht

Zurück-Taste erscheint, getrennt, wenn die HTML des Inneren der schreiben <ion-tab>. Aber es verschwindet, wenn die HTML in einer anderen Datei sind.

<ion-tabs class="tabs-striped tabs-top"> 
     <ion-tab title="Login" href="#/page2/signin">     
     //<ion-nav-view name="page2-signin"></ion-nav-view>// 
     <ion-content has-bouncing="false"> 
     <h2>login page</h2> 
     </ion-content>   
     </ion-tab> 
     <ion-tab title="Rigister" href="#/page2/signup"> 
     <ion-nav-view name="page2-signup"></ion-nav-view> 
     </ion-tab>   
    </ion-tabs> 

Antwort

0

Nach dem Verweisen auf Ihren Bottom-Code scheint es, als ob Sie Tabs hinzufügen und die Seite so etwas wie den folgenden Code verweisen.

<ion-nav-view name="page2-signin"></ion-nav-view> 

Ihre index.html-Datei enthält bereits eine Navigationsleiste. Wenn Sie also versuchen, eine andere Seite in einem Tab anzuzeigen, wird die Schaltfläche Zurück in der Navigationsleiste nicht angezeigt, da Sie bereits eine Navigationsleiste hinzugefügt haben.

Ich habe einige Änderungen in Ihrem Code vorgenommen. Zuerst in Ihrer index.html Datei hatte ich den Code auskommentieren, die Navigationsrücktaste hinzufügten. Etwas wie unter dem Code.

Als nächstes hatte ich explizit Navigationsschaltfläche auf Ihrer page2.html Datei hinzufügen.

<!-- Adding navigation bar on top of page2 with a back button--> 
    <ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center"> 
     <ion-nav-buttons side="primary"> 
      <button class="button-icon ion-arrow-left-c" ng-click="myGoBack()"> 
       Page 1 
      </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 

    <ion-view view-title="Login" align-title="left" cache-view="false" class="logincontent"> 
     <ion-content scroll="false"> 
     <ion-tabs class="tabs-striped tabs-top"> 
      <ion-tab title="Login" href="#/page2/signin">     
      <ion-nav-view name="page2-signin"></ion-nav-view> 
      </ion-tab> 
      <ion-tab title="Register" href="#/page2/signup"> 
      <ion-nav-view name="page2-signup"></ion-nav-view> 
      </ion-tab>   
     </ion-tabs>  
     </ion-content> 
    </ion-view> 

Fügen Sie diese Zeile in Ihrer script.js-Datei hinzu, nachdem Sie die page2-Vorlage präsentiert haben.

.state('page2', { 
    url: '/page2', 
    templateUrl: 'page2.html', 
    controller: 'Page2Ctrl' // Adding this line which will invoke controller 

    }) 

Atlast Controller-Funktion in Ihrem script.js

.controller('Page2Ctrl', function($scope,$state,$rootScope) { 
    $scope.myGoBack = function(){ 
    $state.go('page1'); 
    } 
}) 

Jetzt Datei hinzufügen, wie Sie klicken zurück wird, die wir ausdrücklich in page2.html hinzugefügt hatte, wird über Funktion erhalten aufrufen und es wird Push der Zustand zurück auf Seite1. Hoffe, das wird dir helfen .. Happy Coding. :)

Verwandte Themen