Stuck creating a custom css style directive

Question

For an only visual editor I\'m trying to create a new directive that writes a CSS style. I\'m stuck at trying to get the directive to update when a checkbox is clicked to ma

Answer 1

Try using the directive directly on the element you want to change, it's easier to do and to maintain.

HTML:

Note: Use {{settings.Window.BackgroundColor}} to pass the property's value and not a String.

Directive:

myApp.directive('customstyle', function () {
    return {
        restrict: 'AC',
        link: function (scope, element, attrs) {          
           scope.$watch(attrs.myTransparent, function (value) {     
             element.css('background-color', (value ? 'transparent' : attrs.myBgcolor));            
           });                      
        }
    }
});

Note: Use element.css() to change CSS properties directly on the element.

jsFiddler: http://jsfiddle.net/jYQc6/8/