Angularjs applycss 用于指令答案

【问题标题】：Angularjs applycss for directivesAngularjs applycss 用于指令
【发布时间】：2014-09-02 13:19:27
【问题描述】：

它基本上将您的页眉和页脚创建为可在任何地方使用的指令。

代码运行良好，但如何为页眉和页脚 html 文件应用自定义 css。

它们只能内联应用吗？换句话说，我可以不引用外部 css。

EDIT: Code @ http://plnkr.co/edit/AmvqLu?p=options
Expected: Need to apply style.css to header.html alone.

感谢您的回复。

【问题讨论】：

当然你可以使用外部的css文件。目前尚不清楚您的具体问题是什么
如何使用它？那是我的问题。当我在 header.html 中使用链接标签时，它没有按预期工作。
doesn't work 是什么意思？没有一些细节，你的整个问题就太模糊了
已经做了一个plunker版本@plnkr.co/edit/AmvqLu?p=options。当我删除链接标记行@ header.html 时，它正在工作。如果您还有其他问题，请告诉我。谢谢。
link 标签属于头部，为什么不能放在那里？这就是你所追求的吗？ plnkr.co/edit/XOAgvF?p=preview

【解决方案1】：

CSS 文件必须放在文档head 中，您不能将它们放在 Angular 模板（您的 header.html 文件）中。相反，请将所有 css 文件放在文档头中并命名您的 CSS，以便它们仅适用于您希望它们应用的部分。

index.html

<html>
<head>
<link rel="stylesheet" href="/styles/app.css">
</head>
...

header.html

<div class="header"><p>This is some text</p></div>

app.css （仅将标题段落变为蓝色）

.header p { color: blue; }

您可以搜索面向对象的 CSS (OOCSS) 或 BEM，以获取有关 CSS 命名约定的更多信息，以免规则发生冲突。

【讨论】：