Here is an angular directive I created for a template. I wanted to keep the css styling separate from the template so that when I use the custom tag in my html file like <my-box></my-box> or <my-box></my-box>, I can configure the css styling for each tag from a separate file using classes like
<my-box class=customStyle1></my-box><my-box class=customStyle2></my-box>{
"myStyle":{
"background-color":"#AAB000",
"height":"100px",
-----
-----
}
}
You can view an example of my template here.
Code snippet
counterbox.directive('myBox', function ($http) {
return {
restrict: 'EAC',
template: '<div id=l1 style="height:100px"><table style="width:100%;height:100%;text-align:center;border-style:solid black;border-collapse:separate;border-spacing:2px" align="center"><colgroup><col style="width:33%"/><col style="width:33%;text-align:center"/><col style="width:33%"/></colgroup><tr style="color:black;font-family:sans-serif;font-size: 1em;font-weight:normal;padding-bottom:-5px;"><th style="text-align:center">X</th><th style="text-align:center">Y</th><th style="text-align:center">Z</th></tr><tr style=""><td style="background-color:lightblue;color:black">{{w.l}}</td><td style="background-color:orange;color:black">{{w.m}}</td><td style="background-color:red;color:black">{{w.h}}</td></tr><tr style="background-color:#BCC633;color:white;font-size:2em"><td id=g1 height="50%" colspan="3">{{w.s}}</td></tr></table></div>',
replace: true,
scope: {
w:'='
},
link: function (scope, element, attrs) {
scope.s = +scope.l + +scope.m + +scope.h;
}
};
});
## Instead of using templateUrl, I separated common styling through an external css file. However, there were two issues: 1. The css file was not accessible for configuration by users or clients, who could only configure the Json file. 2. If you look at my table, each row has a unique color which needs to be modified using the css configurations provided through the Json.