Ionic gdzie umieścić nagłówek i górny navbar w widoku jonowym?

Question

Próbuję umieścić nagłówek i górny navbar wewnątrz dyrektywy jonowej.

Po umieszczeniu nagłówka nav navbar poza stroną znacznika ion-view miga na czarno, jeśli strona jest zainicjalizowana.

Ale jeśli spróbuję wstawić nagłówek i górny navbar wewnątrz tytułu ion-view, a nagłówek w nagłówku nie zostanie wyświetlony.

Czy ktoś może mi powiedzieć, co robię źle?

Może brakuje jakiegoś znacznika w środku?

Dzięki za pomoc.

Oto kod szablonu:

<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

próby korzystania z wersji JavaScript rozwoju tabs i navigation bars.
Są łatwiejsze do manipulowania w kodzie JS, ponieważ są dostarczane z usługami $ionicTabsDelegate i $ionicNavBarDelegate.

Answer 2

Oto kilka przykładów użycia NavBar:

• prostą stronę z przyciskami lewo i prawo:

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> 

• Nawigacja poprzez menu bocznym:

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

• Nawigacja poprzez menu bocznego i paska kart:

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