I'm currently utilizing ng-style to dynamically change the background color of a container class (from a third party tallinn.css file). The color is fetched from the database. However, when I navigate through Angular's routing, the ng-style attribute on the container stops functioning and does not load anything into the inline style of the element. Interestingly, I inserted a div inside the container div and set its background color using the same ng-style and scope variable, and it consistently works. It seems to work properly after a hard reload and clearing the cache. A closer look at Chrome's debugger reveals what happens when it fails: Debugger
Upon inspection, the style tag on the "container" div appears empty while the style tag on the inner div is filled with the correct background color rgb(65,87,251).
Here is the code snippet:
//inside angular controller
function setStyles(colors) {
//set theme styles
if (colors) {
$scope.styles = {
menuBackground: colors.Menu.Background.HexCode // "#4157FB"
};
}
}//inside tallinn.css
.navigation .container {
background-color: #000000;
bottom: 0px;
padding: 40px 40px;
position: absolute;
top: 0px;
width: 300px;
z-index: 1000;
}<div class="container" ng-style="{'background-color': styles.menuBackground}">
{{styles.menuBackground}}
<div ng-style="{'background-color': styles.menuBackground}" style="height:200px; width:200px"></div>
</div>I've experimented with different methods to resolve this issue, like using a directive (which had the same problem), before switching to ng-style.
Could this possibly be a timing inconsistency between when the CSS loads versus when ng-style should fetch the style from the JavaScript?
Any assistance would be greatly appreciated!
EDIT:
To clarify, the dynamic color for the 'background-color' is retrieved from the database. This is why I'm utilizing ng-style instead of hardcoding it in the CSS. Ideally, ng-style should take precedence over the 'background-color' defined in the tallinn.css shown above because it should apply styles inline. However, it doesn't seem to be doing so...