Angular中的动态样式

Question

我试图在样式元素中使用角度js绑定。

所以，我可以动态地设置CSS的a:hover或a:active

例的喜欢：

$scope.a = {hover: {backgroundColor:#0BF, display: block}};

<style> 
a:hover { 
    background-color: {{a.hover.backgroundColor }}; 
    display: {{a.hover.display }}; 
    } 
</style> 

http://jsfiddle.net/cmsanche/PpyVn/

Answer 1

或者试试directive方式：

HTML：

<style ng-repeat="test in styles" dynamic-style="test"></style> 

JS：

.directive("dynamicStyle",function(){ 
    return { 
     templateUrl: 'style_template.css' 
    } 
    }) 

模板：

.test { 
     background-color: {{ test.backgroundColor }}; 
     display: {{ test.display }}; 
     width: {{ test.width }}; 
     height: {{ test.height }}; 
     color: {{test.color}} 
     } 

工作例如：http://plnkr.co/edit/yzFFfv?p=preview