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

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?
Ответить с цитированием