Angularを使用するとき、適用するスタイルシート(.css)を動的に切り替えるにはどのようにすればよいでしょうか。
ここでは、serviceを利用してその仕組みを構築してみました。
切り替えのポイント
スタイルシートを動的に切り替えるにあたって、ポイントとなるのは以下の２点です。
- スタイルシートの
linkにclassを割り当てる - スタイルシートを使用するかしないかは、
linkのdisabled属性で制御する
上記２つのポイントにより、以下の動作が可能になります。
- 割り当てたclassを使ってスタイルシートをセレクトし、
disabled属性の割り当て状況を動的に制御する
serviceの作成
実際のコードを見て見ましょう。
以下のコードのように、スタイルシートの有効/無効を切り替えるservice cssSwitch を定義します。
cssSwitch
.factory('cssSwitch', function() {
return {
enableCss: function enableCss(className) {
// 有効とするCSSのdisabled属性をはずす
$('link.' + className).removeAttr('disabled');
},
disableCss: function disableCss(className) {
// 無効とするCSSにdisabled属性をつける
$('link.' + className).attr('disabled', 'disabled');
}
};
})
このserviceを利用することで、以下のようにスタイルシートの使用状況を動的に制御することができます。
controller
.controller('mainController', function($scope, cssSwitch){
$scope.changeCss = function(name){
cssSwitch.enableCss('style-a');
cssSwitch.disableCss('style-b');
};
})
なお、linkには次のようにclassを割り当てておきます。
view
<link class="style-a" rel="stylesheet" href="style-a.css" />
<link class="style-b" rel="stylesheet" href="style-b.css" />
実行例
実際に動作するコードをPlunkerに作成したので、参考にしてみてください。
実行例
補足
この方法は、あらかじめ必要なスタイルシートがダウンロードされていることを前提としています。
そもそも余計なトラフィックを増やしたくない場合は、他の手法を検討するのが良いでしょう。