JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div ng-controller="MyCtrl" class="graybg float">
  Transparent: <input type="checkbox" ng-model="settings.Window.Transparent"/>
  <div class="examplediv">
    sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

<customstyle my-class="examplediv" my-transparent="{{settings.Window.Transparent}}" my-bgcolor="{{settings.Window.BackgroundColor}}"></customstyle>
</div>

CSS

.examplediv{
  width:200px;
  border:solid 5px #000;
  margin:25px;
}
.float{
  float:left;
  width:100%;
}
.graybg{
  background-color:#999;
}

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.tranparency = false;
  $scope.settings = {"Window":{"Transparent":true,"BackgroundColor":"#eeeeee"}}; 
}

function parseBool(val)
{
    if ((typeof(val) === "string" && (val.toLowerCase() === 'true' || val.toLowerCase() === 'yes')) || val === 1)
        return true;
    else if ((typeof(val) === "string" && (val.toLowerCase() === 'false' || val.toLowerCase() === 'no')) || val === 0)
        return false;
    return null;
}

myApp.directive('customstyle', function () {
	return {
		restrict: 'E',
		link: function (scope, element, attrs) {
			var isTransparent = false;
			attrs.$observe('myTransparent', function (value) {
				isTransparent = value;
				updateStyle(isTransparent);
			});
      
      function updateStyle(myBool){
        var htmlText = '<style>.' + attrs.myClass + "{";
        if (parseBool(myBool)) {          
          htmlText += 'background-color: transparent;';
        }
        else {
          htmlText += 'background-color: ' + attrs.myBgcolor + ';';
        }
        htmlText += "}</style>";
        element.html(htmlText);
      }      
		}
	}
});