通过离子选项卡单击更改Ionic Navbar颜色

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（）但是当其他$摘要正在运行时，它会抛出错误。

这是应用链接 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>