ändert nicht die Farbe in der Side-Menü-Überschrift dynamisch

Question

Ich brauche Seitenmenü, so habe ich Seite Menüvorlage in meinem Projekt verwendet. Ich versuche dynamische Farben im Header zu verwenden. Ich habe die Farben erhalten, um sich im Inhalt entsprechend zu ändern, aber ich muss es auch im Header ändern. Ich habe es versucht, ohne Side-Menü-Vorlage zu verwenden. Wenn ich ion-header auf derselben Seite anlege, auf der meine Inhalte angezeigt werden, ändert sich die Kopfzeilenfarbe, aber das Seitenmenü funktioniert nicht. Gibt es einen Mechanismus, um dies zu tun?

App Controller

.state('sidemenu',{ 
     url:'/sidemenu', 
     abstract:true, 
     templateUrl:'templates/sidemenu.html' 
     }) 


     //id is passed as the parameter 
     .state('sidemenu.chapters',{ 
     url:'/chapters/:id', 
     views:{ 
      'menuContent':{ 
      templateUrl:'templates/chapters.html', 
      controller: 'ChaptersCtrl' 
      } 
     } 
     }) 

In meinem ChaptersCtrl habe ich den Wert, die Farbe zu ändern, erforderlich, aber ich kann es nicht in sidemenu.html verwenden.

sidemenu.html

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content drag-content="false"> 
     <ion-nav-bar class="dark header header-height"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 

     <ion-nav-buttons side="left"> 
      <button class="button button-dark button-icon button-clear ion-navicon" menu-toggle="left"> 
      </button> 
     </ion-nav-buttons> 
     </ion-nav-bar> 
     <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
    <ion-content class="has-header"> 
     <ion-list> 
     <ion-item menu-close class="item item-icon-left" href="#/content"> 
      <i class="icon ion-bookmark"></i> 
      Table of Content 
     </ion-item> 

     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

Answer 1

du $rootScope und ng-class unter Verwendung erreichen können.

$rootScope funktioniert genauso wie $scope, außer dass die Variable über die gesamte Anwendung verfügbar ist. Sie können dies verwenden, um den Klassennamen in einer Variablen festzulegen, wenn Sie eine bestimmte Seite eingeben. Sagen wir $rootScope.headClass = "mycustomclass".

Danach können Sie das Argument ng-class zu Ihrem Side-Menü-Header hinzufügen. ng-class stellt sicher, dass Ihre Zeichenfolge in eine Klasse konvertiert wird. Also würden Sie ng-class = "{{headClass}}" zu Ihrem Ion-Header im Sidemenu hinzufügen.

Answer 2

Ich weiß nicht, ob es großartig ist, aber ich habe es gerne getan:

if (counter == 10) { $rootScope.final = 'color:red;'; }

<button class="button button-counter"> <span style="{{final}}">{{timer}}</span> </button>