Стили компонентов AngularJS 1.5 не применяются

0

Несколько раз я заметил, что стили, добавленные для компонентов 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 и посмотрите, что стили фактически разбираются браузером:

Изображение 174551

Также интересно: когда я нахожу компонент в элементах, я вижу следующее:

Изображение 174551

Обратите внимание, что элемент не выделяется синим цветом, как обычно, даже если он имеет ненулевой размер?

Итак, почему он может работать так? Это как-то связано с процессом компиляции шаблона AngularJS (это моя догадка) или есть другие причины?

UPD: если я устанавливаю border: 10px solid red для элемента, который получает визуализируется: Изображение 174551

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>
  • 0
    Не смогу помочь тебе с просто картиной. Нужен какой-то код, который показывает вашу проблему. Покажите нам разметку позади фотографии.
  • 0
    @Nix извините, забыл добавить его в закладки, так что он был экранирован, отредактирован
Показать ещё 6 комментариев

1 ответ

1
Лучший ответ

Вероятно, это связано с тем, что вы настраиваете таргетинг на пользовательский элемент, а хром устанавливает его для 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
}
  • 0
    большое спасибо, это был дисплей по умолчанию Chrome: встроенный стиль
Сообщество Overcoder
Наверх
Меню