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>

当我使用以下标记时，只设置了离子标签 - 而不是离子导航条。我怎样才能让它们都被设计成样式，为什么离子导航条没有被设计？

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上的问题现已关闭。

离子团队成员Mike的codepen工作为我们提供了适当的解决方案，尽管它似乎不是 nice 的解决方法。 >

这是他的摘录的摘录：

  // 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 not styling

2 个答案: