ng-class on Angular 1.5 component element

Question

I'm converting some directives to components, and was trying to eliminate the extra "wrapping" element since replace: true doesn't work anymore. However, the old wrapping element had an ng-class on it.

<some-directive>
    <div ng-class="{classOne: someDirectiveCtrl.isClassOne}">
        <p>...</p>
    </div>
</some-directive>

In that example, with replace: true , the div becomes the "wrapping" element.

<div ng-class="{classOne: someDirectiveCtrl.isClassOne}">
     <p>...</p>
</div>

So...

Question

Is there a way to access information in a components controller in order to add classes to the component's element?

ie

<some-component ng-class="{classOne: someComponentCtrl.isClassOne}">
    <p>...</p>
</some-component>

I'd rather not put functions for the component in the parent controller, and I'd like to have the classes listed in the HTML.

Answer 1

You need to use ng-controller instead of ng-class . Assign controller into ng-controller and then use your class.

Answer 2

Components always use isolate scope, which is inaccessible from the outside world. You'll have to give up the nice declarative approach that ng-class provides and use the available $element in the component controller instead.

Answer 3

We gave up and reorganized the html and css so that it wasn't an issue. :(