CSS в угловой директиве

Question

Я пишу угловую директиву, чтобы отобразить некоторую информацию о музыкальном альбоме, в настоящее время она показывает информацию ниже обложки альбома, но если элемент становится слишком маленьким, он должен сжимать обложку альбома и помещать информация рядом с ним. На данный момент у меня просто есть html на странице, и у меня есть css, чтобы делать изменения на главной странице, но это приводит к тому, что страница является довольно монолитной, поскольку она также отображает другие вещи, поэтому я хочу отделить ее от директивы.

Однако я не вижу, как включить CSS в директиву, я не хочу включать его в строку в html, и я мог бы поместить тег стиля в html и поместить его туда, но тогда он будет повторяться каждый раз, когда я использую эту директиву. Есть ли способ вставить ссылку в файл CSS в голову из директивы? Например, есть поле templateUrl, есть ли stylesheetUrl или что-то еще?

Answer 1

Вы можете проверить этот модуль: angular-css-injector.
Имейте в виду, что это в настоящее время совместим только с угловым 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

Структурирование углового приложения - одна из самых сложных вещей об обучении углового. Угловая попытка сложного модульного кода, но (текущее состояние) html, css и javascript на самом деле не позволяет вам собирать вещи вместе, поэтому вам нужно найти способ, который хорошо работает для вас.

Способ, которым я держу вещи отдельно (вместе взятые), обычно использует мою систему сборки (я использую gulp) и препроцессор CSS (для меня, Stylus).

Мой процесс создания новой директивы заключается в следующем:

1. Определить новый угловой модуль (в отдельном файле) 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:

Там нет простого способа сохранения кода директивы отдельно от остальной части страницы, но если вы исследуете строить системы и угловые структуры проектов других людей, вы найдете то, что вам нравится.

Примечание Скоро ^ТМ все будет аккуратнее (см web components и angular 2.0)