イオンナビゲータのページ単位のカスタマイズ

Question

現在表示されているビューに応じて、マイ・イオン1シングル・ページ・アプリケーションのion-nav-barのbackground-colorを変更したいと考えています。

デフォルトのイオンコードジェネレーターから始めて、アプリのスケルトンはmenu.htmlファイルにあり、各ページには独自のHTMLテンプレートと独自のコントローラーがあります。

ion-nav-barのbackground-colorをHTMLテンプレートまたはそのコントローラから強制するにはどうすればよいですか？

btw、私は既に成功しているSASSが役に立ちましたら、

多くの感謝！

Answer 1

---

---

まあJavaScriptでこれを行うためのさまざまな方法があります。

$rootScope.backgroundColor = 'yellow'

ます。また、設定定義済みのクラスを使用することができます。一つの方法は、あなたが別の色で、あなたはコントローラから背景色を変更することができたいビュー

<ion-nav-bar ng-style="{'background-color': $root.backgroundColor}"> </ion-nav-bar>それぞれに続いて

ですCSSの背景色。また、コントローラ内のクラス名を変更：

$rootScope.backgroundClass = 'yellow-bg'

<ion-nav-bar ng-class="$root.backgroundClass"> </ion-nav-bar>

又は <ion-nav-bar ng-class="{$root.backgroundClass: true}"> </ion-nav-bar>

及びCSSで、

.yellow-bg {background-color: yellow} .red-bg {background-color: red}

各クラスにそれぞれの背景色を定義します

必要に応じて、このためのディレクティブを作成できます。