Error in parsing value for background color - angularjs

Question

Below code,

<div style="background-color: {{ row.legend }}"></div>

executes fine,

but komodo editor shows the error as Error in parsing value for 'background-color'

I tried modifying to: ng-style="'background-color': '{{ row.legend }}'" , but functionality breaks.

How do I resolve this error?

Answer 1

Always use ng-style over style with evaluation braces.

The technical background is that some browsers will remove invalid style properties from the DOM immediately hence angular will not be able to update the style property later on even if they would be valid by then.

In your example

<div style="background-color: {{ row.legend }}"></div>

may evaluate to

<div style="background-color: "></div>

in the first place and thus be removed from DOM. If row.legend takes a valid value afterwards angular won't be able to update the DOM accordingly.

This will not happen with the built-in directive ng-style.

For completeness i will repeat the answer of @overexchange

The problem in the latter case are the missing braces, so the solution would be

<div ng-style="{'background-color': row.legend }"></div>