角度指令中的 CSS

Posted 2023-03-06

【中文标题】角度指令中的 CSS

【英文标题】：CSS in an angular directive

【发布时间】：2015-01-30 14:11:21

【问题描述】：

我正在编写一个 Angular 指令来显示有关音乐专辑的一些信息，目前它显示专辑封面下方的信息，但如果元素变得太小，那么它应该缩小专辑封面并将信息放在它旁边.目前我只是在页面中直接使用 html 并让 css 在主页中进行更改，但这会导致页面非常单一，因为它还显示其他内容，这就是为什么我想将它分离成指令。

但是我看不到如何在指令中包含 CSS，我不想在 html 中内联包含它，我可以在 html 中放置一个样式标记并将其放在那里，但是它会每次我使用该指令时都会重复。是否有某种方法可以将指向 CSS 文件的链接从指令中注入到头部？好像有一个 templateUrl 字段，有没有 stylesheetUrl 什么的？

【问题讨论】：

可悲的是，这是一个常见问题。

为什么需要指令中的 CSS？这样做是为了让你可以打包指令并在其他项目中使用它吗？

@EdHinchliffe，只是为了将所有内容分开？理想情况下，我想在它自己的文件中指定 CSS，然后让服务器将所有指令的 CSS（最好是页面上使用的指令）合并到一个文件中并提供服务。

【参考方案1】：

您可以查看此模块：angular-css-injector. 请注意，它目前仅与 angular 1.2.x 兼容...

【参考方案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) 

        
    ;
);

【参考方案3】：

构建 Angular 应用程序是学习 Angular 最难的事情之一。 Angular 努力将代码模块化，但 html、css 和 javascript 的（当前状态）并不能真正让您将这些东西打包在一起，因此您必须找到一种适合您的方式。

我将事物分开（但在一起）的方式通常是使用我的构建系统（我使用 gulp）和 CSS 预处理器（对我来说，Stylus）。

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

定义一个新的角度模块（在它自己的文件中）my-albums.coffee:

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

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

创建玉模板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

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

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

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

自动将.jade文件编译成app.templates角度模块（预填充$templateCache（app.templates包含在app.coffee的导入中 将所有咖啡脚本编译并连接到script.js 编译并连接所有文件名不以下划线开头的手写笔文件到style.css

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

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

TL;DR：

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

注意 很快^TM 事情会变得更整洁（参见web components 和angular 2.0）