在一页中使用ion-header-bar覆盖ion-nav-bar

时间:2016-09-04 09:31:46

标签: javascript angularjs ionic-framework

我正在尝试使用具有默认离子导航栏的离子标题栏显示离子项目。

问题是,我想在一页而不是离子导航条中使用离子条标题。我尝试过以下但没有运气。

下面是index.html

<ion-nav-bar class="bar-light  bar-positive">
        <ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
    </ion-nav-bar>

下面是一页:

<ion-view title="items" id="page15" >
  <ion-content  ng-controller="itemsCtrl"  class="has-header"  hide-nav-bar="true">
  <ion-header-bar class="bar-positive">
    <div class="buttons">
      <button class="button button-icon icon ion-ios-minus-outline"
        ng-click="data.showDelete = !data.showDelete"></button>
    </div>
    items
    <div class="buttons">
      <button class="button button-icon icon ion-log-out" ng-click="test()">
      </button>
    </div>
  </ion-header-bar>
    <ion-list show-delete="data.showDelete" >
      <ion-item ng-repeat="item in items" 
        item="item"
         class="item-remove-animate">
         {{ item.name }}
        <ion-delete-button class="ion-minus-circled" 
          ng-click="onItemDelete(item)">
        </ion-delete-button>
      </ion-item>
    </ion-list>
  </ion-content>
  <div class="float-button" ng-click="additem()">
    <span class="height-fix">
     <a class="content">
      <i class="ion-ios-plus-empty"> </i>
     </a>
    </span>
  </div>
</ion-view>

输出如下

enter image description here

我不想要那个页面的默认离子导航条,只想要离子标题栏。

1 个答案:

答案 0 :(得分:0)

我终于明白了。只需添加导航栏按钮而不是离子标题栏。