Question

下面是我的模板角度指令。我想将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

为CSS使用单独的文件（.css文件）
使用＆＃34; templateUrl＆＃34;为您的html模板使用单独的文件而不是＆＃34;模板＆＃34;在您的指令中（有关详细信息，请参阅AngularJS Templates）
使用标记（<link type="text/css" rel="stylesheet" href="style.css"/>）

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

1 个答案: