CSS injection в директивы

[-VenoM-]

Вопрос ключевой, по-моему. Есть CSS шаблон (в данном случае таблицы), хочу нарисовать в директиве табличку под этим шаблоном.

Что испробовал.
1. Без использования bower.

Подключаем в index.html стили.

<script src="pure-css-accordion-nav/css/sensor-table.css"></script>
<link rel="stylesheet" href="pure-css-accordion-nav/css/sensor-table.css">

var app = angular.module("myApp", []);

app.directive("sensorsLi", function () {
    return function (scope, element, attrs) {
        // css: 'pure-css-accordion-nav/css/sensor-table.css'
        // stylesheet: 'pure-css-accordion-nav/css/sensor-table.css'
        var data = scope[attrs["sensorsLi"]];
        var tableElem = angular.element("<table>").addClass("[B]table_blur[/B]");
        element.append(tableElem);
        if (data == "")
        {
            var trElemOne = angular.element('<tr>');
            var sensor = trElemOne.append(angular.element('<th>').text("sensor"));
            var master =  trElemOne.append(angular.element('<th>').text("master Station"));
            for(i=0; i<1; i++)
            {
                var trElem = angular.element('<tr>');
                var thElem = angular.element('<td>').text("bla");
                trElem.append(angular.element('<td>').text("bla1"))
                trElem.append(thElem);

                var trElemTwo = angular.element('<tr>');
                var thElemTwo = angular.element('<td>').text("blabla");
                trElemTwo.append(angular.element('<td>').text("blabla"))
                trElemTwo.append(thElemTwo);
                tableElem.append(trElemOne, trElem, trElemTwo);

            }
        }
    }
});

Результат - CSS класс table_blur применяется, но не работает анимация. Как сказать ангуляру использовать в этой директиве

link rel="stylesheet" href="pure-css-accordion-nav/css/sensor-table.css?

2. С использованием bower. Сделал как пишут в
http://angular-js.in/angular-css/
Установил, файлы подключил.

var app = angular.module("myApp", ['angularCSS']);

app.directive("sensorsLi", function () {
    return function (scope, element, attrs) {
        css: 'pure-css-accordion-nav/css/sensor-table.css'
        var data = scope[attrs["sensorsLi"]];
        var tableElem = angular.element("<table>").addClass("[B]table_blur[/B]");
        element.append(tableElem);
        if (data == "")
        {
            var trElemOne = angular.element('<tr>');
            var sensor = trElemOne.append(angular.element('<th>').text("sensor"));
            var master =  trElemOne.append(angular.element('<th>').text("master Station"));
            for(i=0; i<1; i++)
            {
                var trElem = angular.element('<tr>');
                var thElem = angular.element('<td>').text("bla");
                trElem.append(angular.element('<td>').text("bla1"))
                trElem.append(thElem);

                var trElemTwo = angular.element('<tr>');
                var thElemTwo = angular.element('<td>').text("blabla");
                trElemTwo.append(angular.element('<td>').text("blabla"))
                trElemTwo.append(thElemTwo);
                tableElem.append(trElemOne, trElem, trElemTwo);

            }
        }
    }
});

Результат - как будто бы не видит файл

css: 'pure-css-accordion-nav/css/sensor-table.css'

И непонятно как сказать ангуляру использовать в этой директиве

link rel="stylesheet" href="pure-css-accordion-nav/css/sensor-table.css?

[TestUser013]

css: 'pure-css-accordion-nav/css/sensor-table.css'
А что эта строчка делает? Вы понимаете какую конструкцию написали?

[-VenoM-]

TestUser013
Как я понял, нужно указать путь к .css файлу. Как в случае с шаблоном.

[TestUser013]

Данная конструкция бессмысленна, странно почему оно вообще работает

[destus]

-VenoM-,

CSS шаблон

нет такого понятия

CSS класс table_blur применяется, но не работает анимация

для анимации нужен модуль ngAnimate подключать

И непонятно как сказать ангуляру использовать в этой директиве
link rel="stylesheet" href="pure-css-accordion-nav/css/sensor-table.css?

это не директива, а HTML тэг.

var trElem = angular.element('<tr>');
                var thElem = angular.element('<td>').text("bla");
                trElem.append(angular.element('<td>').text("bla1"))
                trElem.append(thElem);

так не пишут. Делают HTML шаблон.

Данная конструкция бессмысленна, странно почему оно вообще работает

[-VenoM-]

Ок, спасибо за ответы.

Тогда выходит, что стиль CSS должен подключаться только вместе с html шаблоном и применяться соотв. к нему? Как тут:

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    /* Binding css to directives */
    css: 'my-directive/my-directive.css'
  }
});

так не пишут. Делают HTML шаблон.

Шаблоны использую. Но потребовалось сделать динамическую таблицу(столбцы и строки изменяются в зависимости от входных http данных), подумал что так будет проще: применить внутри директивы к html элементам css стиль и всё. Да и примеры находил такого кода. Например в этой песочнице:
https://metanit.com/web/angular/2.12.php
Но спорить не буду, т.к. это моё первое приложение на angularjs будет.
Шаблоны так шаблоны.

для анимации нужен модуль ngAnimate подключать

Это понятно. Просто в данном случае в css стиле "table_blur" уже есть анимация.

[destus]

Я не совсем понимаю зачем вам это. Если бы ангуляр 2, ок, инкапсулирование стилей. Но это ангуляр 1. Все работает в глобальной области. Ну то есть если опять же говорим о БЭМ организации проекта, каждый компонент отдельная папка, в которой лежит его шаблон, стили и класс. Галпом и ли вебпаком собираем все в один файл.

[-VenoM-]

Немного уточню. Если я правильно понимаю, в ангуляр js невозможно инкапсулировать внешний .css файл (т.е. применить определённый .css файл только к определённому шаблону, а остальные .css стили изолировать). Отдельные папки создаются просто для удобства... а при сборке все стили укладываются в одну строки и если имеются разные по свойствам стили, но с одинаковыми именами - то будут траблы при наложении стилей.
Если это так, то это довольно неудобно и придётся для каждого шаблона делать .css стили с уникальными именами, чтобы избежать наложений (особенно в популярных тегах).

[MetaDriver]

Немного уточню. Если я правильно понимаю, в ангуляр js невозможно инкапсулировать внешний .css файл (т.е. применить определённый .css файл только к определённому шаблону, а остальные .css стили изолировать).

Невозможно - сказано довольно чрезмерно. Возможно: но таки для этого придётся самому это запилить (возможны различные реализации). Но таки, ДА, - из коробки первый ангулар этого не умеет, как и множество других фреймворков.

Отдельные папки создаются просто для удобства... а при сборке все стили укладываются в одну строки и если имеются разные по свойствам стили, но с одинаковыми именами - то будут траблы при наложении стилей.

Угу. Большая часть современного вэба так и работает. И ДА, есть такая трабла с нежелательным наложением/переопределением стилей. И есть разные костыли для обхода (автоматизированные и ручные). Один из таких костылей - вышеупомянутый БЭМ.

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

Вот примерно так тот самый БЭМ и работает. Хорошая новость в том, что проблема слабой и недостаточной инкапуляции в CSS давно и хорошо известна, и прорабатывается потихоньку сразу с двух концов: (1) путём внедрения новых фишек в стандарт (вэб-компоненты) и (2) путём более-менее автоматизированного обхода проблемы в различных фреймворках (например Ангулар-2 имеет встроенный инструмент для инкапсуляции) и методологиях проектирования таблиц стилей (тот же БЭМ). И, кстати, ваш этот сторонний модуль angular-css - он тоже это умеет, просто вы синтаксически неправильно его готовите. Просто покурите ещё его мануал, поправьте ваш код, и он взлетит.
Удачи.

[-VenoM-]

Спасибо за ответ.

И, кстати, ваш этот сторонний модуль angular-css - он тоже это умеет, просто вы синтаксически неправильно его готовите. Просто покурите ещё его мануал, поправьте ваш код, и он взлетит.

Покурил, но не взлетает.

Может, какую-то мелочь пропустил. По порядку.

1. bower install angular-css / в папку проекта скопировался модуль.
2. Подключили в index.html наш модуль, всё открывается.

<script src="bower_components/angular-css/angular-css.min.js"></script>
<script src="bower_components/angular-css/angular-css.js"></script>

3. Подключили в наше приложение, тоже всё открывается

var app = angular.module("myApp", ['angularCSS']);

4. Положили наш foo-bar.css в папку с директивой.

app.directive('fooBar', function () {
    return {
        restrict: 'AE',
        templateUrl: "pure-css-accordion-nav/index-async.html",
        css: "foo-bar.css",
        link: function (scope, element, attrs) {
            console.log('directive')
        }
    };
});

И результата ноль, шаблон не подтягивается.