角をつけてカスタムCSSルールを追加する

Question

私は動的テーマを使ってアプリケーションを作りたいと思っています。たとえば、ボタンがあり、それをクリックすると、いくつかの要素の色が何らかのルールによって変更されます。最初のアイデア -

<style type="text/css" ng-bind="ownStyle"></style> 

とでそれを行うのinit ownStyle $ rootScope中：

$rootScope.ownStyle = "* {color: green }"; 

しかし、それはひどいようです+それは文字列としてのCSSルールを記述するためにあまりにも難しいです。それを行うelegancy方法がありますか？

Answer 1

すると、このような何かを試すことができます。..

$rootScope.color = red; 
 

 
$scope.changecolor = function(){ 
 
    $rootScope.color = blue; 
 
}

/* Base color */ 
 
.dinamic{ 
 
    background-color: white; 
 
}

<style> 
 
    .dinamic{ 
 
    background-color: {{$rootScope.color}} !important; 
 
    } 
 
</style> 
 

 
<button class="dinamic">I Will Change Color</button>

Answer 2

ng-classディレクティブを使用できます。

このディレクティブを「いくつかの要素」に追加するだけで、適切な条件を設定すれば問題ありません。

Answer 3

ng-class組み込みディレクティブを使用できます。

<div ng-class="{'some-class': condition}></div>