Question

我用离子启动myApp sidemenu＆＃39;创建了一个Ionic应用程序，添加了一个登录页面，现在我想根据登录中输入的用户类型自定义我的标题样式，让我们说例如，管理员的正面类和普通用户的冷静。我尝试使用变量从控制器更改类，但它不起作用，这是我的代码：

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

服务 sessionService.getAmbiente（）返回登录后使用window.localStorage保存的类的名称，它工作正常。

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中使用变量，但我认为这不是最合适的方式，当用户类型发生变化时它没有刷新。

Answer 1

根据您从登录中获得的结果

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

现在在你的sidemenu.html中，使用ng-show进行课程更改

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

希望这会对你有所帮助。感谢

Answer 2

与您的用户和数据不一样，特别是因为我有一个服务可以让我登录或不登录的用户，并且在这种情况下所有数据都将执行以下操作

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

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服务

.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 - 如何使用变量更改标题栏样式

2 个答案: