I am working on an angular app and need to dynamically apply CSS styles at runtime to certain elements on a page.
Using ng-style for styling is not the most efficient solution:
I understand that using the ng-style directive works well for specific items that are known in advance, like this example:
<div id="mydiv" ng-style="{color: bgColor}">ABCD</div>
However, I need a way to apply dynamic styles based on angular scope variables to ALL instances of a particular HTML tag on the page, such as <a> or <p>.
An ideal solution would look something like this:
<style>
.in3_counter {color: {{settings.in3Color}};}
.in4_counter {color: {{settings.in4Color}};}
</style>
Update: The values of the CSS scope variables are not predefined, so we cannot anticipate what colors will be applied to the elements since these variables are set dynamically (e.g. using a color picker).
Any suggestions on how to achieve this?