title: Separate the CSS styling from template in Angularjs directive
body: <p>Below is my angular directive for a template. I want to separate the css styling from template as when I use the custom tag in the html file like <code>&lt;my-box&gt;&lt;/my-box&gt;; &lt;my-box&gt;&lt;/my-box&gt;</code>, I can configure the css styling from a separate file for each tag. like <code>&lt;my-box class= customStyle1&gt;&lt;/my-box&gt; ; &lt;my-box class= customStyle2&gt;&lt;/my-box&gt;</code> where the <code>customeStyle1</code> and <code>customStyle2</code> are define in separate file as a Json style. like</p>
  
  <pre><code>{
   "myStyle":{
       "background-color":"#AAB000",
        "height":"100px",
         -----
         -----
     }
  }
  </code></pre>
  
  <p>Here is my example <a href="http://jsfiddle.net/laravinchi/FWPYJ/18/" rel="nofollow">My Template</a></p>
  
  <p>Code snippet </p>
  
  <pre><code> counterbox.directive('myBox', function ($http) {
  
          return {
              restrict: 'EAC',
              template: '&lt;div id=l1 style="height:100px"&gt;&lt;table style="width:100%;height:100%;text-align:center;border-style:solid black;border-collapse:separate;border-spacing:2px" align="center"&gt;&lt;colgroup&gt;&lt;col style="width:33%"/&gt;&lt;col style="width:33%;text-align:center"/&gt;&lt;col style="width:33%"/&gt;&lt;/colgroup&gt;&lt;tr style="color:black;font-family:sans-serif;font-size: 1em;font-weight:normal;padding-bottom:-5px;"&gt;&lt;th style="text-align:center"&gt;X&lt;/th&gt;&lt;th style="text-align:center"&gt;Y&lt;/th&gt;&lt;th style="text-align:center"&gt;Z&lt;/th&gt;&lt;/tr&gt;&lt;tr style=""&gt;&lt;td style="background-color:lightblue;color:black"&gt;{{w.l}}&lt;/td&gt;&lt;td style="background-color:orange;color:black"&gt;{{w.m}}&lt;/td&gt;&lt;td style="background-color:red;color:black"&gt;{{w.h}}&lt;/td&gt;&lt;/tr&gt;&lt;tr style="background-color:#BCC633;color:white;font-size:2em"&gt;&lt;td id=g1 height="50%" colspan="3"&gt;{{w.s}}&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;',
  
              replace: true,
              scope: {
                  w:'='
              },
              link: function (scope, element, attrs) {                    
                  scope.s = +scope.l + +scope.m + +scope.h;
  
              }
          };
      });
  </code></pre>
  
  <p><strong>## I actually used the templateUrl and separate possible common styling through external css file. There is two problems 1. this css file is not accessible to configure the user/client, they can only configure the Json file. and 2. if you notice in my table, each row has separate color. To modify those colors I need to use this css configure through the Json</strong></p>