Ionic - How to change header-bar style with a variable

问题

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:

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

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

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>

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.

回答1:

Based on the result you get from login

  if(user.role == "Admin"){
   $rootScope.adminHeader=true;
   } 
   else{
   $rootScope.adminHeader=false;
   }

Now In your sidemenu.html,Use ng-show for class change

<ion-header-bar class="bar-balanced" ng-show="adminHeader">
 <h1 class="title">Menu</h1>
</ion-header-bar>
<ion-nav-bar class="bar-calm"  ng-show="!adminHeader">
 <h1 class="title">Menu</h1>
</ion-header-bar>

Hope This will help you . Thanks

回答2:

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;
    }
})

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 code :

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

来源：https://stackoverflow.com/questions/39854215/ionic-how-to-change-header-bar-style-with-a-variable

标签

javascript

html

angularjs

ionic-framework