ng-style or style attribute with binding? Which is better? Which is faster? What is the difference?

Question

I am optimizing my large application. I am confused between following two approach, please help to decide which one is faster.

Inline style attributes

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

Using ng-style

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

Using once-style

<div once-style="{'background-color':item.color}"></div> 

Note : For once-style, I have used AngularOnce Directive.

Thanks in advance. Please tell me which one is faster and why.

Answer 1

One time bind is available after Angular 1.3.

You can do this way without depending on third-party libraries:

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

I didn't measure the performance, but I'm pretty sure that its better than without the colons.

Answer 2

Since you are optimizing your considerably large application, performance is definitely under question and I think ngStyle performs better as it sets up watch on the model and will update the view only if the model has changed.

So I would go with ngStyle or onceStyle depending on your scenario:

<div once-style="{'background-color':item.color}"></div> 

Using {{}} will make Angular update the binding every digest cycle, even if the value has not changed.