如何动态更改 ion-nav-bar 背景颜色答案

【问题标题】：How to change ion-nav-bar background colour dynamically如何动态更改 ion-nav-bar 背景颜色
【发布时间】：2017-04-15 09:41:36
【问题描述】：

我是 ionic 应用程序开发的新手，基本上我有一个单选列表，用户可以从中选择选项，我为每个选项设置了背景颜色，我想要它做的是每当用户更改背景颜色选择一个选项。问题是它更改为初始选项，但在初始加载后它不会改变颜色，尽管当我检查页面时我可以看到它已经更改了类名。

这是我的html

<ion-nav-bar class="bar-{{viewColor}} nav-title-slide-ios7" align-title="center">
  <ion-nav-back-button class="button-icon ion-arrow-left-c">
  </ion-nav-back-button>
</ion-nav-bar>

这就是我在我的 js 中分配 viewColor 变量的方式

$scope.viewColor = "positive";

提前致谢

【问题讨论】：

看看ngClass
尝试 ng-class 并将所需的类保存在 rootScope 中
我在使用和不使用 rootScope 在这里发布之前尝试了 ngClass，结果相同@GiovaniVercauteren

标签： html css angularjs ionic-framework

【解决方案1】：

尝试使用 ionicView.beforeEnter 方法，在页面加载完成之前设置 viewcolor 值。

$scope.$on('$ionicView.beforeEnter', function () {
     $scope.viewColor = "positive";
});

【讨论】：

【解决方案2】：

在尝试了不同的解决方案（不起作用）之后，我最终使用了 ion-header-bar 而不是 ion-nav-bar 并且它有效！颜色会随着用户的选择而动态变化。唯一的缺点是我必须为每个视图创建一个标题并自己处理应用程序状态

【讨论】：