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在一個角度指示

回答

相關問題