Angularjs 지시문에서 CSS 스타일을 템플릿과 분리하십시오.

Question

다음은 템플릿에 대한 제 각 지시어입니다. <my-box></my-box>; <my-box></my-box>과 같은 HTML 파일에서 사용자 정의 태그를 사용할 때 CSS 스타일을 템플리트와 분리하려면 각 태그에 대해 별도의 파일에서 CSS 스타일을 구성 할 수 있습니다. <my-box class= customStyle1></my-box> ; <my-box class= customStyle2></my-box>과 같이 customeStyle1과 customStyle2은 별도의 파일에서 Json 스타일로 정의됩니다. 같은

{ 
"myStyle":{ 
    "background-color":"#AAB000", 
     "height":"100px", 
     ----- 
     ----- 
    } 
} 

여기 My Template

코드

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; 

      } 
     }; 
    }); 

을 니펫을 ## 실제로 외부 CSS 파일을 통해 templateUrl 분리 가능한 일반적인 스타일을 사용하는 내 예입니다. 두 가지 문제가 있습니다 1.이 CSS 파일은 사용자/클라이언트를 구성하기 위해 액세스 할 수 없으며 Json 파일 만 구성 할 수 있습니다. 2. 내 테이블에 눈치 채면 각 행마다 색이 다릅니다. 그 색상을 수정하려면 내가 JSON

Answer 1

1. 사용을 통해 CSS에 대한 별도의 파일 (A .css 파일)
2. 사용하는 대신 "templateUrl"를 사용하여 HTML 템플릿에 대해 별도의 파일이 CSS의 구성을 사용할 필요가 당신의 지침에서 "템플릿"의
3. 태그 (<link type="text/css" rel="stylesheet" href="style.css"/>) 귀하의 제안에 대한