How to provide an API to alter CSS / styles / white label for an encapsulated angularJS directive ( re usable widget / component )

Question

In my journey to understand directives and after looking on http://ngmodules.org/ and considering the re usable component / widget model.

A question i have is how would you / whats the best way to provide an API for a hosting application to alter the CSS of an encapsulated widget.

So we have widget A ...

Basic structure

Module Service Model Controller Directive etc

Any events from the component / widget are emited in order to provide loose coupling

We dont want a dependency on a CSS library like bootstrap so we want to be able to provide an api to allow the hosting application to white label the look and fell to be more in line with itself.

How would you / what is the best way to do this ?

Answer 1

I wasn't sure if you're looking to provide default styling within a directive or whether you want the flexibility to apply styling on a directive from a client application.

CSS and styles can be applied on a directive when it is declared. The CSS/Style rules are "passed" into the directive and depending on how your directive template is defined, will automatically be applied to the underlying template. If you want more specific control of CSS/styling, you can use the passed in attributes parameter in a compile or link function to indicate where you want the styling to specifically occur.