2017-04-14 54 views
0

我是离子应用程序开发的新手,基本上我有一个收音机列表,用户可以从中选择选项,对于每个选项,我都设置了背景色和我想要的要做的是在用户选择一个选项时更改背景颜色。问题在于它会更改为初始选项,但它不会在初始加载后更改颜色,但是当我检查页面时,我可以看到它已更改类名称。如何动态更改ion-nav-bar背景色

这是我的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"; 

感谢

+0

看看[ngClass](https://docs.angularjs.org/api/ng/directive/ngClass ) –

+0

尝试ng-class并将所需的类保存在rootScope中 – Mazz

+0

我在使用和不使用rootScope发布之前尝试过ngClass,结果相同@GiovaniVercauteren – user3659384

回答

0

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

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

在玩过各种不同的解决方案后,我结束了使用离子标题栏而不是离子导航栏,它的工作原理!颜色随用户选择而动态变化。唯一的缺点是我必须为每个视图创建一个头并自己处理应用程序状态