Javascript.RU

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

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
Сообщений: 31

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
Сообщений: 805

-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
Сообщений: 31

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

Тогда выходит, что стиль 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
Сообщений: 805

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Встраиваем шрифт внутрь 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