Ionic-如何使用变量更改标题栏样式 [英] Ionic - How to change header-bar style with a variable

问题描述

我用"ionic start myApp sidemenu"创建了一个Ionic应用，添加了一个登录页面，现在我想根据登录中输入的用户类型自定义标题样式，比如说 positive 例如，管理员的类，平静的普通用户.我尝试使用变量从控制器更改类，但是它不起作用，这是我的代码:

I created an Ionic app with 'ionic start myApp sidemenu', added a login page and now I want to customize my headers style according with the type of user entered in the login, lets say positive class for admins and calm for normal users for example. I've try to change the class from the controller with a variable, but it is not working, here is my code:

app.js:

 ...

    $stateProvider
    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'js/app/menu/sideMenu.html',
    controller:'appController'
  })

 ...

appController:

appController:

.controller('appController', function(sessionService, $scope, $stateParams, $state) {
                $scope.ambiente = sessionService.getAmbiente();
                console.log('The class is:'+$scope.ambiente);
}

服务 sessionService.getAmbiente()返回使用window.localStorage登录后保存的类的名称，它可以正常工作.

The service sessionService.getAmbiente() returns the name of the class saved after login with window.localStorage, it works fine.

sideMenu.html:

sideMenu.html:

<ion-side-menus>

  <ion-side-menu side="left">

            <!--**** Using ng-class**** -->
<ion-header-bar  ng-class="ambiente"><!--ng-class="ambiente"-->
  <h1 class="title">Menu</h1>
</ion-header-bar>

    <ion-content>
        <ion-list>
          ...
        </ion-list>
    </ion-content>

  </ion-side-menu>

  <ion-side-menu-content>

          <!--**** Using an expression**** -->
    <ion-nav-bar class={{ambiente}}>
             ...
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>
</ion-side-menus>

我也尝试在$ rootScope中使用变量，但是我认为这不是最正确的方法，并且当用户类型更改时，它也无法正常刷新.

I also tried using a variable in the $rootScope but I think it is not the most proper way and it did not refresh fine when the type of user changed.

推荐答案

不像您那样，您的用户和数据工作正常，特别是因为我有一项服务可以为我提供已登录或未登录的用户以及在这种情况下的所有数据将执行以下操作

Not like you your user and data work, especially as I have a service that gives me the user who is logged in or not, and all data in this case will do the following

您必须做的是在运行"中为不同角色定义变量的值，如下所示:

What you must do is within the "run" define the value of your variable for different roles something like this:

angular.module('starter.controllers', [])

.run(function($window, $rootScope, sessionService) {
    var user = sessionService.get('user');
    if(user.role == 'Admin'){
       $rootScope.adminHeader=true;
    }else{
       $rootScope.adminHeader=false;
    }
})

我的sessioService服务

My sessioService service

.factory('sessionService', ['$http', function($http) {
    return {
        set: function(key, value) {
            return localStorage.setItem(key, JSON.stringify(value));
        },
        get: function(key) {
            return JSON.parse(localStorage.getItem(key));
        },
        destroy: function(key) {
            return localStorage.removeItem(key);
        },
    };
}])

HTML代码:

 <ion-nav-bar ng-class="positive : adminHeader, other_class : !adminHeader">

这篇关于Ionic-如何使用变量更改标题栏样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！