Kann ein CSS-Klassenselektor auf eine Komponente angewendet werden?

Question

Ich habe die folgenden Plunker, die Ui-Router und Angulars 1.6x neue Komponente-Funktion verwendet. Der Status 'userRegister' wird aktiv und initialisiert die Komponente 'userRegister'. Diese Komponente injiziert eine neue <user-register/> in die <ui-view> und injiziert dann den HTML-Inhalt des ng-template Skriptblocks, was alles gut funktioniert.

Der letzte DOM endet als:

<ui-view class="ng-scope"> 
    <user-register class="ng-scope ng-isolate-scope"> 
     <h1 class="header">Create account</h1> 
    </user-register> 
</ui-view> 

Aber ich kann nicht einen Weg finden, eine CSS-Klasse Wähler auf <user-register/> Tag hinzuzufügen.

z.B. eine Klassenauswahl .example genannt Verwendung würde Ich mag folgendes erreichen: bitte

<user-register class="example ng-scope ng-isolate-scope">...<user-register/>

Irgendwelche Ideen?

Answer 1

Sicher können Sie immer die Vorlage auf ein Div wickeln und die Klasse dort platzieren.

Wenn nicht wollen, es zu tun, können Sie die $element und verwenden Sie die $postLink Funktion injizieren, um die Klasse hinzuzufügen, die Sie brauchen:

.component('userRegister', { 
    templateUrl: '/views/user-register', 
    controller: function($element) { 
     this.$postLink = function() { 
     $element.addClass('example'); 
     } 
    } 
}) 

Hier ist die Arbeits Plunker:

https://plnkr.co/edit/VuWu8L9VqrgJRGnxItY2?p=preview

Abgeschlossenes DOM:

<user-register class="ng-scope ng-isolate-scope example"> 
    <h1 class="header">Create account</h1> 
</user-register>