Angular中的动态样式

Question

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

这样我就可以动态设置a:hover或a:active

之类的css

示例：

$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