Ionic wo Header und Top Navbar in Ion-View setzen?

Question

Ich versuche, Header und Top-Navbar innerhalb der Ion-View-Direktive zu setzen.

Wenn ich Header nav navbar außerhalb der ion-view Tag-Seite setzen, blinkt schwarz, wenn Seite initialisiert wird.

Aber wenn ich versuche, Kopfzeile und Top-Navbar innerhalb der ion-view Titel und Überschrift in der Kopfzeile einfügen wird nicht angezeigt.

Kann mir jemand sagen, was ich falsch mache?

Vielleicht fehlt ein Tag innen?

Danke für jede Hilfe. Hier

ist der Code der Vorlage:

<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

Versuchen Sie, die JavaScript-Versionen von tabs und navigation bars zu verwenden.
Sie sind einfacher in JS-Code manipuliert werden, weil sie mit den Diensten $ionicTabsDelegate und $ionicNavBarDelegate kommen.

Answer 2

Hier sind einige Beispiele von navbar Nutzung:

• Einfache Seite mit den Tasten links und rechts:

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> 

• Navigation über Seitenmenü:

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

• Navigation über Seitenmenü und Tab-Leiste:

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