Angular指令中的CSS

Question

我正在编写一个 Angular 指令来显示关于音乐专辑的一些信息，目前它会在专辑封面下方显示信息，但如果元素变得太小，则应缩小专辑封面并将信息放置在旁边。目前，我只是直接在页面中使用 html，并使用 css 在主页面上进行更改，但这导致页面相当庞大，因为它还会显示其他内容，所以我想将它分离成指令。

然而，我不知道如何在指令中包含 CSS，我不想在 html 中内联包含它，我可以在 html 中放置一个 style 标签并将其放在其中，但这样每次使用指令都会重复出现。是否有一种方法可以从指令中注入到 head 中链接到 CSS 文件？ 像 templateUrl 字段一样有 stylesheetUrl 或其他东西吗？

- Jonathan.

---

这是一个普遍存在的问题，令人遗憾。 - Liglo App

你为什么需要在指令内部使用CSS？这是为了将指令打包并在其他项目中使用吗？ - Ed_

@EdHinchliffe，为了保持一切分离？理想情况下，我希望在它自己的文件中指定CSS，然后让服务器将所有指令的CSS（更好的是只有页面上使用的指令）组合成一个文件，并提供服务。 - Jonathan.

Answer 1

你可以查看这个模块: angular-css-injector。需要注意的是，它目前仅与angular 1.2.x兼容...

- MarcoS

Answer 2

你可以像这样在指令中注入 CSS：

var head = document.getElementsByTagName('head')[0];
var cs = document.createElement('link');
cs.rel = 'stylesheet';
cs.href = 'css/myStylesheet.css';
head.appendChild(cs);

因此，指令看起来像这样：

app.directive('myDirective', function () {
    var head = document.getElementsByTagName('head')[0];
    var cs = document.createElement('link');
    cs.rel = 'stylesheet';
    cs.href = 'css/myStylesheet.css';
    head.appendChild(cs);
    return {
        templateUrl:'templates/myTemplate.html',
        link: function (scope, elm, attrs, ctrl) {

        }
    };
});

- s.alem

Answer 3

在学习Angular时，构建一个Angular应用程序是最困难的事情之一。Angular试图将代码模块化，但（当前状态下的）HTML、CSS和JavaScript并不能真正地让你将它们打包在一起，所以你必须找到适合自己的方法。

我通常使用我的构建系统（我使用gulp）和CSS预处理器（对我来说是Stylus）来保持事物的分离（但又在一起）。

我创建新指令的过程如下：

定义一个新的Angular模块（在其自己的文件中）my-albums.coffee：

``` angular.module('my-albums', [])

.directive('myAlbumDirective', ()=> restrict: 'A' templateUrl: 'SomeTemplate.jade' # etc. ) ```

创建一个jade模板 my-album-directive.jade ``` .album img(ng-src="{{album.imageUrl}}) span.name {{album.name}} ```

使用与模块同名前缀下划线的样式文件来创建 _my-albums.styl。在这里我将包含模块特定的CSS。

``` [myAlbumDirective] .album display flex flex-direction column @media screen and (min-width: 600px) flex-direction row ```

然后，每当我将一个Angular模块导入到我的app.coffee中（其中包含一长串的模块导入），我也会在我的main.styl样式表中导入它的样式：

@import '../my-albums/_my-albums.styl'

当我运行我的构建系统时，它（除其他事项外）：

• 自动将.jade文件编译成一个app.templates angular模块（预填充$templateCache）（app.templates已包含在app.coffee的导入中）
• 将所有coffeescript编译并连接到script.js中
• 将所有文件名不以下划线开头的stylus文件编译并连接到style.css中

然后在我的索引页面中，我只有两个导入：

script(src='js/app.js')
link(rel='stylesheet', href='css/style.css')

TL;DR:

没有简单的方法将指令代码与页面的其余部分分开，但如果您研究构建系统和其他人的Angular项目结构，您会找到自己喜欢的东西。

注意 很快<sup>TM</sup>事情会变得更加整洁（请参见Web组件和Angular 2.0）

- Ed_