ion-nav-bar ng-class 没有样式

Question

<ion-nav-bar ng-class="{'bar-positive': isAndroid, 'bar-stable': !isAndroid}">
</ion-nav-bar>

<ion-tabs ng-class="{'tabs-positive': isAndroid, 'tabs-icon-top': true}">

  <!-- Account Tab -->
  <ion-tab title="Account" icon="ion-ios7-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

当我使用以下标记时，只有 ion-tabs 有样式，而 ion-nav-bar 没有。我怎样才能使它们都具有样式，为什么 ion-nav-bar 没有样式？

Answer 1

好的，没关系。 There's an issue for this on github. 另外，我发现了一个有点复杂的解决方法，在他们修复 ion-nav-bar 指令之前应该没问题：

<ion-nav-bar class="{{ isAndroid ? 'bar-positive' : 'bar-stable' }}">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

Answer 2

以上 Github 问题现已关闭。

Ionic 团队成员 Mike 的 codepen 工作为我们提供了一个合适的解决方案，尽管它不似乎不错解决方法。

这是他的片段摘录：

  // We need to be able to add a class the cached nav-bar
  // Which provides the background color
  var cachedNavBar = document.querySelector('.nav-bar-block[nav-bar="cached"]');
  var cachedHeaderBar = cachedNavBar.querySelector('.bar-header');

  // And also the active nav-bar
  // which provides the right class for the title
  var activeNavBar = document.querySelector('.nav-bar-block[nav-bar="active"]');
  var activeHeaderBar = activeNavBar.querySelector('.bar-header');
  var barClass = attrs.navBarClass;
  var ogColors = [];
  var colors = ['positive', 'stable', 'light', 'royal', 'dark', 'assertive', 'calm', 'energized'];
  var cleanUp = function() {
    for (var i = 0; i < colors.length; i++) {
      var currentColor = activeHeaderBar.classList.contains('bar-' + colors[i]);
      if (currentColor) {
        ogColors.push('bar-' + colors[i]);
      }
      activeHeaderBar.classList.remove('bar-' + colors[i]);
      cachedHeaderBar.classList.remove('bar-' + colors[i]);
    }
  };

https://codepen.io/mhartington/pen/dozjvv

总之，我们应该管理一些DOM操作。

ion-nav-bar ng-class 没有样式

ion-nav-bar ng-class not styling

css

angularjs

ng-class

ionic-framework