Ionico dove inserire l'intestazione e la barra di navigazione superiore nella vista ionica?

Question

Sto provando a inserire l'intestazione e la barra di navigazione superiore all'interno della direttiva vista ionizzazione.

Se inserisco la barra di navigazione dell'intestazione all'esterno della pagina di tag ion-view nera lampeggiante se la pagina è inizializzata.

Ma se provo a inserire l'intestazione e la barra di navigazione superiore all'interno del titolo ion-view e l'intestazione nell'intestazione non viene visualizzata.

Qualcuno potrebbe dirmi cosa sto facendo male?

Forse manca qualche tag all'interno?

Grazie per qualsiasi aiuto.

ecco il codice del template:

<div class="bar bar-header bar-positive has-tabs-top"> 
    <button class="button button-icon icon ion-chevron-left" ui-sref="home"> 
    </button> 
    <h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1> 
    <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart"> 
    </button> 
</div> 

<!--TOP TAB BAR --> 
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark"> 
    <div class="tabs"> 
     <a class="tab-item orange"> 
     Home 
     </a> 
     <a class="tab-item"> 
     Favorites 
     </a> 
     <a class="tab-item"> 
     Settings 
     </a> 
    </div> 
</div> 

<ion-view> 
<div class="bar bar-header bar-positive has-tabs-top"> 
    <button class="button button-icon icon ion-chevron-left" ui-sref="home"> 
    </button> 
    <h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1> 
    <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart"> 
    </button> 
</div> 

<!--TOP TAB BAR --> 
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark"> 
    <div class="tabs"> 
     <a class="tab-item orange"> 
     Home 
     </a> 
     <a class="tab-item"> 
     Favorites 
     </a> 
     <a class="tab-item"> 
     Settings 
     </a> 
    </div> 
</div> 
    <ion-content ng-controller="DailyListCtrl"> 

     <!--WRITEOUT OVERAL STATS FOR DAYS --> 
     <ion-list class="list" > 
      <ion-item class="item itemListCustom" ng-repeat="listDataItem in listData"> 

        <div class="listDateTimeBlock"> 
        <div class="day"><h3>{{listDataItem.DATE_FROM_DD}}</h3></div> 
        <div class="month"><h3>{{listDataItem.DATE_FROM_MM}}</h3></div> 
        </div> 

       <!--ROW ONE -->     
       <div id="left"> 
        <div class="left-inner"> 
         {{ 'APPOINTMENT_SUCCESS_RATE' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.SUCCESS_RATE}} % 
        </div> 
       </div> 
       <div id="right"> 
        <div class="left-inner floatRight"> 
         {{ 'DIALS' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.DIALS_CNT}} 
        </div> 
       </div> 

       <!--ROW TWO--> 
       <div id="left"> 
        <div class="left-inner "> 
         {{ 'SUCCESS_RATE_SINCE_START' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.SUCCESS_RATE_SINCE}} % 
        </div> 
       </div> 
       <div id="right"> 
        <div class="left-inner floatRight"> 
         {{ 'CONVERSATIONS' | translate }} : 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.CONVERS_CNT}} 
        </div> 
       </div>     

       <!--ROW THREE--> 
       <div id="left"> 
        <div class="left-inner"> 
         {{ 'MY_DEFICIT' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.DEFICIT}} % 
        </div> 
       </div> 
       <div id="right"> 
        <div class="left-inner floatRight"> 
         {{ 'APPOINTMENTS' | translate }} : 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.APPT_CNT}} 
        </div> 
       </div>     
      </ion-item> 
     </ion-list> 

    <ion-infinite-scroll 
     icon="ion-loading-c" 
     distance="30%" 
     on-infinite="setDateRange();"> 
    </ion-infinite-scroll> 

    </ion-content> 

    <!-- BOTTOM TABS --> 
    <div class="tabs-striped tabs-background-positive tabs-light"> 
    <div class="tabs"> 
     <a class="tab-item active" ui-sref="daily-list" href="/#/daily-list"> 
     <i class="icon ion-ios7-paper-outline"></i> 
     </a> 
     <a class="tab-item" ui-sref="weekly-list" href="/#/weekly-list"> 
     <i class="icon ion-star"></i> 
     </a> 
     <a class="tab-item" ui-sref="daily-list" href="/#/daily-list"> 
     <i class="icon ion-gear-a"></i> 
     </a> 
     <a class="tab-item" ui-sref="daily-list" href="/#/daily-list"> 
     <i class="icon ion-gear-a"></i> 
     </a> 
    </div> 
    </div> 
</ion-view> 

Answer 1

tenta di utilizzare la versione JavaScript di tabs e navigation bars.
Sono più facili da manipolare nel codice JS, perché vengono forniti con i servizi $ionicTabsDelegate e $ionicNavBarDelegate.

Answer 2

Ecco alcuni esempi di utilizzo della barra di navigazione:

• semplice pagina con pulsanti sinistro e destro:

http://codepen.io/beaver71/pen/YwLELa

<ion-view title="onepage"> 
    <ion-nav-buttons side="left"> 
     <button class="button"> 
     LeftButton 
     </button> 
    </ion-nav-buttons>   
    <ion-nav-buttons side="right"> 
     <button class="button button-assertive"> 
     RightButton 
     </button> 
    </ion-nav-buttons>   

    <ion-content class="padding"> 
     <!-- The content of the page --> 
    </ion-content> 
    </ion-view> 

• navigazione tramite menu laterale:

http://codepen.io/beaver71/pen/XXBvYp

• navigazione tramite menu laterale e barra delle schede:

http://codepen.io/beaver71/pen/xZWXBO