CODEWITHSUNDEEP
angularjs
morgs32
morgs32

Reputation: 1459

Dynamic styles in Angular

I'm trying to use angular js bindings within a style element.

So that I can dynamically set the css for the likes of a:hover or a:active

Example:

$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/

Upvotes: 1

Views: 854

Answers (1)

Ivan Chernykh
Ivan Chernykh

Reputation: 42196

Or try directive way:

Html:

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

JS:

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

Template:

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

Working example: http://plnkr.co/edit/yzFFfv?p=preview

Upvotes: 3

Related Questions