angularjs指令: how to encapsulate css?

Question

在使用 Web 组件的项目之后，我将回到 AngularJS。令我感到沮丧的是，我找不到合适的方法让指令将其 CSS 保持在内部(或封装)。

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

AngularJS 指令并非如此。

直到这里我看到的是:

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

2) 用 element.css({}) 定义内部规则；内部链接函数，但在这种情况下，样式是内联应用的，因此太重，不能轻易被外部 css 覆盖。

还有其他方法吗？

谢谢

Answer 1

GitHub上已经创建了一个 angular.service ，您可以动态加载您的css文件，也许它会有所帮助

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

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

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