Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.04.2017, 00:07
Аспирант
Отправить личное сообщение для -VenoM- Посмотреть профиль Найти все сообщения от -VenoM-
 
Регистрация: 31.10.2016
Сообщений: 36

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?
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2017, 10:49
Аспирант
Отправить личное сообщение для TestUser013 Посмотреть профиль Найти все сообщения от TestUser013
 
Регистрация: 13.07.2013
Сообщений: 94

css: 'pure-css-accordion-nav/css/sensor-table.css'
А что эта строчка делает? Вы понимаете какую конструкцию написали?
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2017, 16:25
Аспирант
Отправить личное сообщение для -VenoM- Посмотреть профиль Найти все сообщения от -VenoM-
 
Регистрация: 31.10.2016
Сообщений: 36

TestUser013
Как я понял, нужно указать путь к .css файлу. Как в случае с шаблоном.
Ответить с цитированием
  #4 (permalink)  
Старый 03.04.2017, 11:29
Аспирант
Отправить личное сообщение для TestUser013 Посмотреть профиль Найти все сообщения от TestUser013
 
Регистрация: 13.07.2013
Сообщений: 94

Данная конструкция бессмысленна, странно почему оно вообще работает
Ответить с цитированием
  #5 (permalink)  
Старый 03.04.2017, 12:39
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 845

-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 шаблон.
Цитата:
Данная конструкция бессмысленна, странно почему оно вообще работает
Ответить с цитированием
  #6 (permalink)  
Старый 03.04.2017, 15:17
Аспирант
Отправить личное сообщение для -VenoM- Посмотреть профиль Найти все сообщения от -VenoM-
 
Регистрация: 31.10.2016
Сообщений: 36

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

Тогда выходит, что стиль 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" уже есть анимация.

Последний раз редактировалось -VenoM-, 03.04.2017 в 15:26.
Ответить с цитированием
  #7 (permalink)  
Старый 03.04.2017, 19:16
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 845

Я не совсем понимаю зачем вам это. Если бы ангуляр 2, ок, инкапсулирование стилей. Но это ангуляр 1. Все работает в глобальной области. Ну то есть если опять же говорим о БЭМ организации проекта, каждый компонент отдельная папка, в которой лежит его шаблон, стили и класс. Галпом и ли вебпаком собираем все в один файл.
Ответить с цитированием
  #8 (permalink)  
Старый 11.06.2017, 20:18
Аспирант
Отправить личное сообщение для -VenoM- Посмотреть профиль Найти все сообщения от -VenoM-
 
Регистрация: 31.10.2016
Сообщений: 36

Немного уточню. Если я правильно понимаю, в ангуляр js невозможно инкапсулировать внешний .css файл (т.е. применить определённый .css файл только к определённому шаблону, а остальные .css стили изолировать). Отдельные папки создаются просто для удобства... а при сборке все стили укладываются в одну строки и если имеются разные по свойствам стили, но с одинаковыми именами - то будут траблы при наложении стилей.
Если это так, то это довольно неудобно и придётся для каждого шаблона делать .css стили с уникальными именами, чтобы избежать наложений (особенно в популярных тегах).
Ответить с цитированием
  #9 (permalink)  
Старый 11.06.2017, 23:49
Аватар для MetaDriver
Аспирант
Отправить личное сообщение для MetaDriver Посмотреть профиль Найти все сообщения от MetaDriver
 
Регистрация: 24.04.2014
Сообщений: 65

Сообщение от -VenoM- Посмотреть сообщение
Немного уточню. Если я правильно понимаю, в ангуляр js невозможно инкапсулировать внешний .css файл (т.е. применить определённый .css файл только к определённому шаблону, а остальные .css стили изолировать).
Невозможно - сказано довольно чрезмерно. Возможно: но таки для этого придётся самому это запилить (возможны различные реализации). Но таки, ДА, - из коробки первый ангулар этого не умеет, как и множество других фреймворков.
Цитата:
Отдельные папки создаются просто для удобства... а при сборке все стили укладываются в одну строки и если имеются разные по свойствам стили, но с одинаковыми именами - то будут траблы при наложении стилей.
Угу. Большая часть современного вэба так и работает. И ДА, есть такая трабла с нежелательным наложением/переопределением стилей. И есть разные костыли для обхода (автоматизированные и ручные). Один из таких костылей - вышеупомянутый БЭМ.
Цитата:
Если это так, то это довольно неудобно и придётся для каждого шаблона делать .css стили с уникальными именами, чтобы избежать наложений (особенно в популярных тегах).
Вот примерно так тот самый БЭМ и работает. Хорошая новость в том, что проблема слабой и недостаточной инкапуляции в CSS давно и хорошо известна, и прорабатывается потихоньку сразу с двух концов: (1) путём внедрения новых фишек в стандарт (вэб-компоненты) и (2) путём более-менее автоматизированного обхода проблемы в различных фреймворках (например Ангулар-2 имеет встроенный инструмент для инкапсуляции) и методологиях проектирования таблиц стилей (тот же БЭМ). И, кстати, ваш этот сторонний модуль angular-css - он тоже это умеет, просто вы синтаксически неправильно его готовите. Просто покурите ещё его мануал, поправьте ваш код, и он взлетит.
Удачи.
Ответить с цитированием
  #10 (permalink)  
Старый 12.06.2017, 14:57
Аспирант
Отправить личное сообщение для -VenoM- Посмотреть профиль Найти все сообщения от -VenoM-
 
Регистрация: 31.10.2016
Сообщений: 36

Спасибо за ответ.
И, кстати, ваш этот сторонний модуль 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')
        }
    };
});


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

Последний раз редактировалось -VenoM-, 12.06.2017 в 14:59.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Встраиваем шрифт внутрь css sovsem-nub (X)HTML/CSS 0 26.09.2015 20:17
возврат на прежний css faig92 Элементы интерфейса 0 28.03.2015 17:31
Подключение css bartle96 Элементы интерфейса 13 27.07.2013 18:03
JQuery CSS анализатор javascript jQuery 2 15.08.2010 20:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 10:58