サイドメニューのヘッダー内の色が動的に変更されない

Question

サイドメニューが必要なので、プロジェクトでサイドメニューのテンプレートを使用しました。ヘッダーに動的な色を使用しようとしています。私はコンテンツに応じて変更する色を取得しましたが、ヘッダでも変更する必要があります。サイドメニューテンプレートを使わずに試しました。私のコンテンツが表示されている同じページにイオンヘッダーを置くと、ヘッダーの色は変わりますが、サイドメニューは機能しません。これを行うためのメカニズムはありますか？私ChaptersCtrlで

アプリコントローラ

.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' 
      } 
     } 
     }) 

、私は色を変更するために必要な値を持っているが、私はsidemenu.htmlでそれを使用することはできません。あなたが$rootScopeとng-classを使用することによって、これを達成することができます

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

。

$rootScopeは、$scopeと同じ方法で動作しますが、変数はアプリケーション全体で使用できる点が異なります。これを使用して、特定のページを入力するときにクラス名を変数に設定できます。 $rootScope.headClass = "mycustomclass"としましょう

その後、ng-class引数をサイドメニューのヘッダーに追加できます。 ng-classは、文字列がクラスに変換されていることを確認します。したがって、あなたはサイド・メニューのイオン・ヘッダーにng-class = "{{headClass}}"を追加します。

Answer 2

それは素晴らしいことだ場合、私は知らないが、私はそれが好きやった：

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

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