Question

我曾多次注意到为AngularJS 1.5组件添加的样式并未真正应用，现在我再次遇到这种情况，并且无法解释为什么会这样。情况：我已经在其中查看了home和组件bt-table。

简化模板：

<section id="home">
    <bt-table data="hc.tableData" options="hc.tableOptions"></bt-table>
</section>

在home的样式（sass）中，我编写了以下选择器：

#home
    bt-table
            margin: 0 0 30px 0

然后我看到它没有应用，转到devtools并看到样式实际上是由浏览器解析的：

同样有趣：当我将组件悬停在元素中时，我看到了：

请注意，即使元素的大小非零，元素也不会像蓝色一样突出显示？

那么，为什么会这样呢？它与AngularJS模板编译过程有关（它是我的猜测）还是有其他原因？

UPD：如果我为元素设置border: 10px solid red，则会呈现：

UPD： bt-table中的标记如下所示：

<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>

Answer 1

这可能是因为您要定位自定义元素，并且chrome将其设置为display:inline。两个选项：

选项1 ：添加“阻止”样式。

bt-table{
   display: block;
}

选项2 使用替换（这就是我要做的）。您可以在指令上设置replace:true，然后定位非自定义元素的第一个子节点，并显示为block：

<section id="table">

除了id = table之外，其他建议选择其他内容。 id应该在页面上是唯一的。我建议为目标添加一个类选择器：

e.g。

<section class="btn-table">

然后将您的样式更新为：

#home .bt-table{
    margin: 0 0 30px 0
}

AngularJS 1.5组件样式未应用

1 个答案: