angularjs指令：如何封装CSS？ [英] angularjs directive : how to encapsulate css?

问题描述

与Web组件项目后，我要回AngularJS。我的事实感到沮丧，我不能找到一个指令，一个适当的方式，以保持它的CSS内部（或胶囊）。

After a project with Web Components, i'm going back to AngularJS. I'm frustrated by the fact I can't find a proper way for a directive to keep its CSS internal (or encapsulated).

使用Web组件我没有这个问题，因为已经有可以嵌入在模板的样式标记

With web component I hadn't this problem since there is already a style tag that can be embedded in the template.

这不是与AngularJS指令的情况。

That's not the case with AngularJS directives.

直到在这里我看到了什么是：

Until here what I saw is :

1）定义在外部文件中的CSS规则：我-指令{颜色：红色;}，但这不是封装

1) define an CSS rule in an external file : my-directive {color:red;}, but this is not encapsulation.

2）定义与element.css内部规则（{}）;链接函数内，但在这种情况下，样式直列施加并且因此是过重，不能由外部的CSS可以更容易地修改

2) define an internal rule with element.css({}); inside link function, but in this case the style is applied inline and thus is too heavy and cannot be easily override by external css.

有没有其他办法？

感谢

推荐答案

有是在GitHub上已经创建了一个角服务，您可以dinamically加载CSS文件，也许会有所帮助。

There is a one angular service already created on GitHub, you can load your css files dinamically, maybe it can be helpful

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

或者你可以给一个机会GruntJS，你可以有一个非常好的项目结构，各模块/文件夹可以有自己的CSS文件，咕噜会捆绑所有的文件合并成一个（或多个，这取决于你如何配置） 。可以很容易地管理和更改，但你也必须加载您的网页上只有一个文件。也许这些链接可以帮助找到咕噜模块，可以帮助你。

Or you can give a chance to GruntJS and you can have a very nice project structure, every module/folder can have own css file, and Grunt will bundle all that files into one (or many, it depends how you configure). It's easy to manage and change, but also you have only one file loaded on your page. Maybe these links can be helpful to find Grunt module that can help you.

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

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

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

这篇关于angularjs指令：如何封装CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！