Вопрос ключевой, по-моему. Есть 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?