改变离子中的离子视图标题颜色

Question

我正在使用离子启动菜单模板.我想更改每个页面的标题背景颜色.我目前有:

<ion-view view-title="Search">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

我试过了:

<ion-view view-title="Search" class="bar bar-header bar-assertive">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

但它根本不起作用(内容未呈现).该头文件并不能帮助我.这样做的正确方法是什么？

Answer 1

一些方法:

1. 您可以将ion-nav-bar添加到每个视图.

   <ion-view view-title="Page 1">
     <ion-nav-bar class="bar-balanced">
       <ion-nav-back-button></ion-nav-back-button>
     </ion-nav-bar>
     <ion-content>
       ...
     </ion-content>
   </ion-view>
   

   Codepen示例

2. 您还可以使用ng-style更新背景颜色(以及任何其他属性)

   主导航栏:

    <ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
       <ion-nav-back-button></ion-nav-back-button>
     </ion-nav-bar>
   

   CSS:

   .nav-bar-block, .bar {
     background-color: inherit !important;
   }
   

   控制器:

   $scope.$on('$ionicView.beforeEnter', function() {
       $rootScope.viewColor = 'green';
   }); 
   

   Codepen示例