Несколько раз я заметил, что стили, добавленные для компонентов AngularJS 1.5, на самом деле не применяются, и теперь я снова столкнулся с этим и не могу понять причину, почему это так происходит. Ситуация: у меня есть просмотр home
и компонента bt-table
внутри него.
Упрощенный шаблон:
<section id="home">
<bt-table data="hc.tableData" options="hc.tableOptions"></bt-table>
</section>
В стилях (sass) для home
я пишу следующий селектор:
#home
bt-table
margin: 0 0 30px 0
Тогда я вижу, что это не применяется, перейдите в devtools и посмотрите, что стили фактически разбираются браузером:
Также интересно: когда я нахожу компонент в элементах, я вижу следующее:
Обратите внимание, что элемент не выделяется синим цветом, как обычно, даже если он имеет ненулевой размер?
Итак, почему он может работать так? Это как-то связано с процессом компиляции шаблона AngularJS (это моя догадка) или есть другие причины?
UPD: если я устанавливаю border: 10px solid red
для элемента, который получает визуализируется:
UPD: разметка внутри bt-таблицы выглядит так:
<section id="table">
<div class="panel panel-default">
<div class="panel-heading">Table</div>
<table st-table="tc.data.data" class="table table-striped">
<!-- HEADERS, SORTING AND SEARCHBARS -->
<thead>
<tr>
<th ng-repeat="header in tc.data.headers" st-sort="{{header.sortsearch}}" ng-bind="header.title"></th>
</tr>
<tr ng-if="tc.options.search === 'every'">
<th ng-repeat="header in tc.data.headers">
<input st-search="{{header.sortsearch}}" placeholder="search for {{header.title.toLowerCase()}}" class="input-sm form-control" type="search"/>
</th>
</tr>
<tr ng-if="tc.options.search === 'all'">
<th>
<input st-search placeholder="search in all columns" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<!-- CONTENT -->
<tbody>
<tr ng-repeat="row in tc.data.data">
<td ng-repeat="column in row" ng-bind="column"></td>
</tr>
</tbody>
<!-- PAGINATION -->
<tfoot ng-if="tc.options.pagination">
<tr ng-if="tc.tdata.options.pagination.type === 'buttons'">
<td colspan="5" class="text-right">
<div st-pagination="" st-items-by-page="tc.tdata.options.pagination.itemsByPage" class="no-margin"></div>
</td>
</tr>
<tr ng-if="tc.options.pagination.type === 'input'">
<td colspan="5" class="text-right">
<div st-pagination="" st-items-by-page="tc.options.pagination.itemsByPage" st-template="components/l-table/custom-pagination.custom.html" class="no-margin"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</section>
Вероятно, это связано с тем, что вы настраиваете таргетинг на пользовательский элемент, а хром устанавливает его для display:inline
. Два варианта:
Вариант 1: добавьте стиль "block".
bt-table{
display: block;
}
Вариант 2 - заменить (это то, что я бы сделал). Вы должны установить replace:true
в директиве и затем нацелиться на первый дочерний элемент, который не является настраиваемым элементом и будет отображаться для block
:
<section id="table">
Другие предложения выбирают что-то еще, кроме id = table. id
должны быть уникальными на странице. Я бы рекомендовал добавить селектор класса для таргетинга:
например
<section class="btn-table">
Затем обновите свои стили до:
#home .bt-table{
margin: 0 0 30px 0
}