2016-04-14 20 views
0

イオンバックボタンがタブ付きビューに表示されません。 私はplunkerで、サンプルコードを作成しました:イオンバックボタンがタブ付きビューに表示されない

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

私は内のhtmlのを書いた場合

戻るボタンは、表示されているタブ付きビューのサインインして登録ページを分離しています<ion-tab>。しかし、htmlが別のファイルにある場合は消えています。

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

答えて

0

あなたplunkerコードを参照した後、あなたが、タブを追加し、コードの下のようなページに何かを参照しているように思えます。

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

index.htmlファイルにはナビゲーションバーが含まれています。したがって、タブ内に他のページを表示しようとすると、すでにナビゲーションバーが追加されているので、ナビゲーションバーに戻るボタンは表示されません。

コードにいくつか変更を加えました。最初のindex.htmlファイルでは、ナビゲーションの戻るボタンを追加していたコードをコメントアウトしていました。以下のコードのようなもの。

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

次に、私は明示的にpage2.htmlファイルにナビゲーションボタンを追加しました。

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

ここで、script.jsファイルで、page2テンプレートを提示した後にこの行を追加します。

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

    }) 

Atlastあなたは私たちが明示的に呼び出されます機能上、page2.htmlに追加したボタンを背面クリックしますと今

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

を提出あなたのscript.jsにコントローラ機能を追加し、それがプッシュします状態は再びpage1に戻ります。これがあなたを助けてくれることを願っています..ハッピーコーディング。 :)

関連する問題