javascript - 在 Angularjs 指令中将 CSS 样式与模板分开

Question

下面是我的模板 Angular Directive(指令)。我想将 css 样式与模板分开，就像我在 html 文件中使用自定义标记一样 <my-box></my-box>; <my-box></my-box> ，我可以从每个标签的单独文件配置 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;

            }
        };
    });

## 我实际上使用了 templateUrl 并通过外部 css 文件分离了可能的通用样式。有两个问题 1. 这个 css 文件无法配置用户/客户端，他们只能配置 Json 文件。和 2. 如果您在我的表格中注意到，每一行都有单独的颜色。要修改这些颜色，我需要通过 Json 使用此 css 配置

Answer 1

1. 为 CSS 使用单独的文件(.css 文件)
2. 在指令中使用“templateUrl”而不是“template”为您的 html 模板使用单独的文件(有关详细信息，请参阅 AngularJS Templates)
3. 使用标签 (<link type="text/css" rel="stylesheet" href="style.css"/>) 将您的 css 文件包含在您的 .html 模板中