CSS injection в директивы
Вопрос ключевой, по-моему. Есть 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? |
css: 'pure-css-accordion-nav/css/sensor-table.css'
А что эта строчка делает? Вы понимаете какую конструкцию написали? |
TestUser013
Как я понял, нужно указать путь к .css файлу. Как в случае с шаблоном. |
Данная конструкция бессмысленна, странно почему оно вообще работает :)
|
-VenoM-,
Цитата:
Цитата:
Цитата:
var trElem = angular.element('<tr>'); var thElem = angular.element('<td>').text("bla"); trElem.append(angular.element('<td>').text("bla1")) trElem.append(thElem); так не пишут. Делают HTML шаблон. Цитата:
|
Ок, спасибо за ответы.
Тогда выходит, что стиль 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' } }); Цитата:
https://metanit.com/web/angular/2.12.php Но спорить не буду, т.к. это моё первое приложение на angularjs будет. Шаблоны так шаблоны. Цитата:
|
Я не совсем понимаю зачем вам это. Если бы ангуляр 2, ок, инкапсулирование стилей. Но это ангуляр 1. Все работает в глобальной области. Ну то есть если опять же говорим о БЭМ организации проекта, каждый компонент отдельная папка, в которой лежит его шаблон, стили и класс. Галпом и ли вебпаком собираем все в один файл.
|
Немного уточню. Если я правильно понимаю, в ангуляр js невозможно инкапсулировать внешний .css файл (т.е. применить определённый .css файл только к определённому шаблону, а остальные .css стили изолировать). Отдельные папки создаются просто для удобства... а при сборке все стили укладываются в одну строки и если имеются разные по свойствам стили, но с одинаковыми именами - то будут траблы при наложении стилей.
Если это так, то это довольно неудобно и придётся для каждого шаблона делать .css стили с уникальными именами, чтобы избежать наложений (особенно в популярных тегах). |
Цитата:
Цитата:
Цитата:
Удачи. |
Спасибо за ответ.
И, кстати, ваш этот сторонний модуль 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') } }; }); И результата ноль, шаблон не подтягивается. |
Часовой пояс GMT +3, время: 22:48. |