角动态样式

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

或者尝试指令方式：

Html：

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

联署材料：

.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