AngularJS 1.5 Komponentenstile werden nicht angewendet

Question

Mehrere Male habe ich bemerkt, dass Stile für AngularJS 1.5 Komponenten nicht wirklich angewendet werden, und jetzt habe ich das wieder und google nicht den Grund, warum es so passiert. Die Situation: Ich habe Aussicht home und Komponente bt-table drin.

Simplified Vorlage:

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

In Stile (Sass) für home ich folgende Selektor schreiben:

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

Dann sehe ich es nicht angewendet wird, zu devtools gehen und sehen, dass Stile sind tatsächlich Vom Browser geparst:

auch intresting: Wenn ich Komponente in Elemente schweben, ich sehe dies:

Beachten Sie, wie Element nicht mit blau als normal markiert ist, obwohl es nicht die Größe Null hat?

Also, warum kann es so funktionieren? Hat es etwas mit AngularJS Template Compilation-Prozess zu tun (es ist meine Vermutung) oder gibt es noch andere Gründe?

UPD: wenn ich border: 10px solid red für Element gesetzt, die gerendert wird:

UPD: das Markup innerhalb bt-Tabelle sieht wie folgt aus:

<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

Es ist wahrscheinlich, weil Sie Targeting auf ein benutzerdefiniertes Element und chrome setzt es auf . Zwei Optionen:

---

Option 1: Fügen Sie eine Art von "Block".

bt-table{ 
    display: block; 
} 

---

Option 2 Verwendung ersetzen (was ich tun würde). Sie würden replace:true über die Richtlinie festgelegt und dann das erste Kind von Targeting-Abschnitt, der kein benutzerdefiniertes Element und wird zu block anzuzeigen:

<section id="table"> 

Andere Vorschläge etwas anderes als id = Tisch holen. id s sollen auf der Seite eindeutig sein. Ich würde empfehlen, einen Klassenselektor zum Ziel hinzuzufügen:

z.B.

<section class="btn-table"> 

aktualisieren Sie dann Ihre Stile:

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