Ionic - 将Navbar Class设置为bar-assertive not working

Question

您的系统信息：

Cordova CLI：6.0.0
离子版：1.2.4
离子CLI版本：1.7.14
Ionic App Lib版本：0.7.0
OS： 节点版本：v5.5.0

<ion-view view-title="Change Header" class="bar-assertive">


  <ion-content>

    <ion-list>
        <ion-radio ng-model="color" ng-value="'bar-stable'">Stable</ion-radio>
        <ion-radio ng-model="color" ng-value="'bar-assertive'">Assertive</ion-radio>
        <ion-radio ng-model="color" ng-value="'bar-calm'">Calm</ion-radio>
    </ion-list>
    <span ng-bind="color"></span>
  </ion-content>
</ion-view>

正如您可以看到上面的代码，我将class="bar-assertive"添加到离子视图标签，导航栏应该将颜色更改为红色，但结果与之前的结果保持一致。导航栏的背景颜色没有变化

Answer 1

您可以使用以下代码在索引中设置导航栏颜色：

  <ion-nav-bar class="bar-assertive"></ion-nav-bar>

  <ion-nav-view></ion-nav-view>

如果您需要自定义导航栏（即应用特定课程），请使用自定义导航栏在<ion-nav-bar>内添加<ion-view>标记：

<ion-nav-bar align-title="right" class="bar-positive">...</ion-nav-bar>

以下是一个示例：http://codepen.io/beaver71/pen/XXeydY

但是如果你想为每个标签/视图设置不同的颜色，你也可以使用ngClass和$ stateChangeSuccess：

  <ion-nav-bar ng-class="headerClass"></ion-nav-bar>

  <ion-nav-view></ion-nav-view>

在你的应用程序中（在运行部分中）你必须根据当前状态设置$ scope.headerClass：

.run(function($state, $rootScope) {
  $rootScope.$on('$stateChangeSuccess', function (evt, toState) {
    if (toState.name == "xyz") {
      $rootScope.headerClass = 'bar-positive';
    } else {
      $rootScope.headerClass = 'bar-assertive';
    }
  });
})