Изменение нав-бар цвета на странице нагрузок ионных

Question

Привет я хочу, чтобы изменить цвет моей nav-bar при каждой загрузке страницы, так что я попытался это: в menu.html:

<ion-side-menus enable-menu-with-back-views="false"> 

<ion-side-menu-content> 

    <ion-nav-bar class="{{headerClass}}"> 

     <ion-nav-buttons side="left"> 

      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 

     </ion-nav-buttons> 

    </ion-nav-bar> 

    <ion-nav-view name="side-menu21"></ion-nav-view> 

</ion-side-menu-content> 

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

    <ion-header-bar class="bar-dark"> 

     <div class="title">Menu</div> 

    </ion-header-bar> 

    <ion-content padding="false" class="side-menu-left has-header"> 

     <ion-list> 

      <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left"><i class="icon ion-home assertive"></i>Persée</ion-item> 

      <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item> 

      <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item> 

      <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item> 

      <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left"><i class="icon ion-help calm"></i>FAQ</ion-item> 

      <ion-item ui-sref="connexion" menu-close="" class="item-icon-left"><i class="icon ion-log-out"></i>Se deconnecter</ion-item> 

     </ion-list> 

    </ion-content> 

</ion-side-menu> 

И в контроллере.js:

angular.module('app.controllers', []) 
    .controller('homeCtrl', function($rootScope, $scope) { 
    $rootScope.headerClass = 'bar-assertive'; 
    }) 

    .controller('reportingCtrl', function($rootScope, $scope) { 
    $rootScope.headerClass = 'bar-balanced'; 
    }) 

    .controller('mediathequeCtrl', function($rootScope, $scope) { 
    $rootScope.headerClass = 'bar-energized'; 
    }) 

    .controller('offreSFRCtrl', function($rootScope, $scope) { 
    $rootScope.headerClass = 'bar-royal'; 
    }) 

    .controller('FAQCtrl', function($rootScope, $scope) { 
    $rootScope.headerClass = 'bar-calm'; 
    }) 

    .controller('connexionCtrl', function($rootScope, $scope) { 
    }) 

Спасибо!

Answer 1

Вы можете изменить заголовок бар цвет нав-бар при каждом изменении страницы

.run(function($rootScope, $location) { 

    $rootScope.$on('$locationChangeStart', function(event, next, current) { 

     if ($location.path() == '/menu/home') { 
      $rootScope.headerClass = 'bar-assertive'; 
     } else if ($location.path() == '/menu/reporting') { 
      $rootScope.headerClass = 'bar-balanced'; 
     } else if ($location.path() == '/menu/mediatheque') { 
      $rootScope.headerClass = 'bar-energized'; 
     } else if ($location.path() == '/menu/offreSFR') { 
      $rootScope.headerClass = 'bar-royal'; 
     } else if ($location.path() == '/menu/FAQ') { 
      $rootScope.headerClass = 'bar-calm'; 
     }else{ 
      $rootScope.headerClass = 'bar-assertive'; 
     } 
    });  

}) 

Example

ИЛИ вы можете добавить ion-nav-bar в каждом view

menu.html

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content>   
     <ion-nav-view name="menu"></ion-nav-view> 
    </ion-side-menu-content> 
    <ion-side-menu side="left"> 
     <ion-header-bar class="bar-dark"> 
      <div class="title">Menu</div> 
     </ion-header-bar> 
     <ion-content padding="false" class="side-menu-left has-header"> 
      <ion-list> 
       <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item> 
       <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item> 
       <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item> 
       <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item> 
       <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item> 
       <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item> 
      </ion-list> 
     </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

home.html

<ion-view title="Persée" cache-view="false"> 
    <ion-nav-bar class="bar-assertive"> 
     <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content> 
</ion-view> 

repoerting.html

<ion-view title="Reporting"> 
    <ion-nav-bar class="bar-balanced"> 
     <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content> 
</ion-view> 

mediatheque.html

<ion-view title="Mediatheque"> 
    <ion-nav-bar class="bar-energized"> 
     <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content> 
</ion-view> 

offreSFR.html

<ion-view title="Offre SFR" cache-view="false"> 
    <ion-nav-bar class="bar-royal"> 
     <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content> 
</ion-view> 

faq.html

<ion-view view-title="FAQ"> 
    <ion-nav-bar class="bar-calm"> 
     <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content> 
</ion-view>