title: Stuck creating a custom css style directive
body: <p>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 make the background-color property transparent. </p>
  
  <p>Here's my (non-working) directive: </p>
  
  <pre><code>myApp.directive('customstyle', function () {
  return {
      restrict: 'E',
      link: function (scope, element, attrs) {
        var bgColor;
        scope.$watch(attrs.myTransparent, function (value) {
          if (value) {
            bgColor = 'transparent';
          } else {
            bgColor = attrs.myBgcolor;
          }
          updateStyle();
        }, true);
  
        function updateStyle() {
          var htmlText = '&lt;style&gt;.' + attrs.myClass + '{';
          htmlText += 'background-color: ' + bgColor + ';';
          htmlText += "}&lt;/style&gt;";
          element.replaceWith(htmlText);
        }
        updateStyle();
    }
  }
  });
  </code></pre>
  
  <p>and html element: </p>
  
  <pre><code>&lt;customstyle my-class="examplediv" my-transparent="settings.Window.Transparent" my-bgcolor="settings.Window.BackgroundColor"&gt;&lt;/customstyle&gt;
  </code></pre>
  
  <p>Here's a jsfiddle of the situation: <a href="http://jsfiddle.net/psinke/jYQc6/" rel="noreferrer">http://jsfiddle.net/psinke/jYQc6/</a></p>
  
  <p>Any help would be greatly appreciated.</p>