角度指令中的CSS

Question

我正在編寫Angular指令以顯示有關音樂專輯的一些信息，當前它在專輯封面下顯示該信息，但是如果元素太小，則應縮小專輯封面並將其旁邊的信息。 目前，我只是直接在頁面中包含html，並讓CSS在主頁中進行更改，但這導致頁面非常單一，因為它還顯示了其他內容，這就是為什么我想將其分離為指令。

但是我看不到如何在指令中包括CSS，我不想在html中內聯它，我可以在html中放置一個樣式標簽，然后將其放在其中，但是隨后每我使用指令的時間。 有什么方法可以將指令中指向CSS文件的鏈接注入到頭部？ 就像有一個templateUrl字段一樣，是否有stylesheetUrl或其他東西？

Answer 1

您可以檢查以下模塊： angular-css-injector 。
請注意，它目前僅與angular 1.2.x兼容...

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) {

        }
    };
});

Answer 3

構建角度應用程序是學習角度應用程序最困難的事情之一。 Angular努力將代碼模塊化，但是html，css和javascript（的當前狀態）實際上不允許您將它們打包在一起，因此您必須找到一種適合自己的方法。

我將事情分開的方式（到目前為止）通常是使用構建系統（使用gulp）和CSS預處理器（對我來說是Stylus）。

我創建新指令的過程如下：

1. 在自己的文件中定義一個新的angular模塊my-albums.coffee ：

    angular.module('my-albums', []) .directive('myAlbumDirective', ()-> restrict: 'A' templateUrl: 'SomeTemplate.jade' # etc. ) 

2. 創建一個玉模板my-album-directive.jade

    .album img(ng-src="{{album.imageUrl}}) span.name {{album.name}} 

3. 創建與以下划線為前綴的模塊相同名稱的手寫筆文件： _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組件和angular 2.0 ）