Question

使用Web Components进行项目后，我将回到AngularJS。我不能为指令找到适当的方法来保持其内部（或封装）的内容而感到沮丧。

使用网络组件我没有这个问题，因为已经有一个样式标签可以嵌入到模板中。

AngularJS指令并非如此。

直到这里，我看到的是：

1）在外部文件中定义CSS规则：my-directive {color：red;}，但这不是封装。

2）使用element.css（{}）定义内部规则;内部链接功能，但在这种情况下，样式是内联应用的，因此太重，不能轻易地被外部CSS覆盖。

还有其他方法吗？

由于

Answer 1

在GitHub上已经创建了一个角度服务，你可以动态加载你的css文件，也许它会有所帮助

https://github.com/Yappli/angular-css-injector

或者你可以给GruntJS一个机会，你可以拥有一个非常好的项目结构，每个模块/文件夹都可以拥有自己的css文件，而Grunt会将所有文件捆绑成一个（或许多，这取决于你如何配置）。它易于管理和更改，但您的页面上只加载了一个文件。也许这些链接可以帮助您找到可以帮助您的Grunt模块。

https://www.npmjs.org/package/grunt-contrib-cssmin

Answer 2

您可以允许用户在指令本身上传递类和/或样式元素，并且可以对该类/样式应用于模板的方式进行细粒度控制。第一步是使用replace : true声明您的指令，然后将任何类/样式信息传递给您的基础模板。例如：

app.directive("myDirective",function(){
  return {
    restrict:'AE',
    replace : true,
    template: '<div>This is my directive</div>'
  };
});

当你在HTML中使用它时：

<my-directive class="red"></my-directive>

生成的HTML将是：

<div class="red">This is my directive</div>

如您所见，replace指令删除了指令标记，但保留了指令的属性并将它们应用于模板。因此，在您的指令中，您在技术上不必做任何事情，您的用户可以传递样式信息，以便在必要时自动应用。

但是，我们假设您的指令布局更复杂：

app.directive("myDirective",function(){
  return {
    restrict:'AE',
    replace : true,
    template: '<div><div>My Title</div>My content</div>'
  };
});

然后，您可以显式指示您的指令可以选择使用的其他类/样式引用以及将应用该类的位置。例如：

<my-directive class="red" class-title="blue"></my-directive>

然后，在您的指令的编译或链接功能中，您可以设置内部模板项的类，如果显示：

app.directive("myDirective",function(){
  return {
    restrict:'AE',
    replace : true,
    template: '<div><div>Title</div>Content</div>',
    compile : function(elem,attr){
        if (attr.classTitle){
          var titleElem = angular.element(elem.children()[0]);
          titleElem.attr("class",attr.classTitle)
        }
    }
  };
});

这将导致以下结果：

<div class="red" class-header="blue">
    <div class="blue">My Title</div>
    My Content
</div>

您可以通过移植来做更好的事情，这样人们就可以使用自己的内容和样式来构建元素。

Answer 3

您可以尝试的一种方法是在JavaScript中声明和分配样式。

声明一个Style对象。

styles = {
        background: 'green',
        color: 'black'
      };

使用ng-style

将对象分配给模板

<div ng-style="$ctrl.styles">
   My Component with local CSS
</div>

使用此方法有以下优点

使用变量来驱动主题。
通过合并两个样式对象（lodashes _.defaults）
控制样式覆盖。
通过逻辑条件应用样式。
拥有无法影响其他组件的本地样式。
您可以将样式放置在角度服务中，并将它们仅注入需要它们的组件中。

完整示例

//Component

class myComponent {
    constructor( myCSSService ) {
        this.styles = {
            background: 'black',
            color: 'white'
        };
        this.myCSSService = myCSSService;
    }
}

myComponent.$inject = [ 'myCSSService' ];

angular.module( 'myModule', [] )
    .component( 'myComponent', {
        controller: myComponent,
        bindings: {},
        template: `
          <div ng-style="$ctrl.styles">
            My Component with local CSS
          </div>
          <div ng-style="$ctrl.myCSSService.styles">
            My Component with Injected CSS
          </div>
        `,
    } );

//Style Service

class myCSSService{
  constructor( ) {
      this.styles = {
        background: 'green',
        color: 'black'
      };
  }
}

angular.module( 'myCSSModule', [] )
    .service( 'myCSSService', myCSSService );

angularjs指令：如何封装css？

3 个答案: