离子导航条的每页定制

Question

我想更改Ionic 1单页应用程序background-color的{​​{1}}，具体取决于当前显示的视图。

从默认的离子代码生成器开始，应用程序的框架位于menu.html文件中，每个页面都有自己的HTML模板和自己的控制器。

如何从HTML模板或其控制器强制执行ion-nav-bar ion-nav-bar？

顺便说一下，如果有帮助，我已经成功激活了SASS。

非常感谢！

Answer 1

使用Javascript有不同的方法。一种方法是

<ion-nav-bar ng-style="{'background-color': $root.backgroundColor}"> </ion-nav-bar>

然后在每个视图中你想要一个不同的颜色，你可以改变控制器的背景颜色：

$rootScope.backgroundColor = 'yellow'

您还可以使用在css中设置背景颜色的预定义类。还要更改控制器中的类名称：

$rootScope.backgroundClass = 'yellow-bg'

<ion-nav-bar ng-class="$root.backgroundClass"> </ion-nav-bar>

或 <ion-nav-bar ng-class="{$root.backgroundClass: true}"> </ion-nav-bar>

并在css中，使用相应的类

定义每种背景颜色

.yellow-bg {background-color: yellow} .red-bg {background-color: red}

如果需要，可以为此创建一个指令。