通过离子选项卡单击更改离子导航栏颜色

Question

我正在使用由 Ionic Creator 生成的 Ionic 指令。在顶部，我们有一个标准的导航栏和底部的选项卡式导航图标。每个图标都有特定的颜色，我希望导航栏在单击时与颜色匹配。

<ion-nav-bar class="bar-{{$root.color}}">

触发on-select，我尝试设置$scope.color、$rootScope.color，甚至创建了一个返回$rootScope.color值的函数。

<ion-tab title="Reps" icon="ion-person-stalker balanced" on-select="headerColor('balanced')">

使用上面的代码，检查器中的 css 发生了变化，但从未应用或呈现新颜色。有谁知道一个很好的方法来解决这个问题？我也尝试过 $scope.$apply() 但这只会在其他 $digests 运行时引发错误。

这是应用链接 https://irthos.github.io/medviz-admin/#/labs

这是带有代码的 index.html https://github.com/irthos/medviz-admin/blob/master/www/index.html

谢谢！

Answer 1

这可以通过在切换状态时改变颜色来实现。我创建了一个可以做到这一点的代码笔：

http://codepen.io/cavanflynn/pen/VLBgEK

<ion-nav-bar class="bar-positive" 
ng-class="{'bar-custom': secColor == '1', 
'bar-custom2' : secColor == '2'}">
</ion-nav-bar>