CSS在一个角度指示

我正在编写一个Angular指令来显示音乐专辑的一些信息，目前它显示专辑艺术下的信息，但如果元素太小，那么它应该缩小专辑的艺术，并把它旁边的信息。目前我只是直接在页面中获得html，并且在CSS中做了主页中的更改，但是这会导致页面非常单一，因为它也会显示其他内容，这就是为什么我想将它分离出来指令。CSS在一个角度指示

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

来源

2014-12-02 Jonathan.

这是可悲的是一个共同的问题。 – 2014-12-02 10:53:08

为什么你需要指令中的CSS？这是否可以打包指令并将其用于其他项目？ – 2014-12-02 11:01:39

@EdHinchliffe，只是为了保持一切分开？理想情况下，我想在自己的文件中指定CSS，然后让服务器将所有指令的CSS（甚至更优选只是页面上使用的CSS）合并到一个文件中，然后将其提供。 – 2014-12-02 11:06:19

你可以检查这个模块：angular-css-injector。
被警告，目前只与角的1.2.x兼容...

来源

2014-12-02 10:58:20 MarcoS

你可以在你的指令这样注入的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) { 

     } 
    }; 
});

来源

2014-12-02 11:04:02

构建角度应用程序是学习角度最难的事情之一。 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
编译并连接所有的CoffeeScript到script.js
编译并连接所有手写笔的文件，其文件名不以下划线为开头style.css

然后我的索引页里面我有两个进口：

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

TL; DR：

有保持你的指令代码分离页面的其余部分没有简单的方法，但如果你研究构建系统和其他人的角度项目结构，你会发现你喜欢的东西。

注意不久^TM事情会更整洁（见web components和angular 2.0）

来源

2014-12-02 11:41:00

CSS在一个角度指示

回答

相关问题