2016-04-14 27 views
0

Sekmeli görünümde iyonik geri düğmesi görünmüyor. Ben plunker örnek kod yarattık: içindeki bir HTML kodunun yazarsanızİyonik geri düğmesi sekmeli görünümde görünmüyor

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

Ben

Geri düğmesi görünüyorsa sekmeli görünümde signin ve tescil sayfalarını ayırdı <ion-tab>. Ancak, html'ler başka bir dosyadaysa kayboluyor.

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

cevap

0

sizin plunker kodu gönderme yaptıktan sonra, size sekmeleri ekleme ve kodunun altına gibi sayfa şey başvuruyorsunuz gibi görünüyor.

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

Dizin.html dosyanız zaten bir gezinme çubuğu içeriyor. Dolayısıyla, bir sekmede başka bir sayfa sunmaya çalışırsanız, zaten gezinme çubuğunu eklediğiniz için gezinme çubuğundaki geri düğmesini göstermez.

Kodunuzda bazı değişiklikler yaptım. Önce index.html dosyanızda navigasyon geri düğmesi ekleyen kodu yorumladım. Kodun altında bir şey var.

<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center"> 
    <!--<ion-nav-back-button class="button-icon ion-arrow-left-c">--> 
    <!--</ion-nav-back-button>--> 
</ion-nav-bar> 

Sonraki, page2.html dosyanıza açık bir şekilde gezinme düğmesi ekledim.

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

Şimdi script.js dosyasında, page2 şablonunu sunduktan sonra bu satırı ekleyin.

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

    }) 

Atlast size açıkça çağırmak alacak fonksiyonu üzerinde page2.html ilave etmişti geri düğmesine basın gibi Şimdi

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

dosyanızda script.js içinde kontrolör işlevi ekleyin ve onu itecek durum tekrar sayfa1'e geri döndü. Umarım bu size yardımcı olur .. Mutlu kodlama. :)