Dynamic refresh background-image with ngStyle In AngularJs

Question

When i use Angular to dynamic change div 's backgroundImage, i find there are two ways to set backgrond-image:

first:

<div style="background:url({{example_expression}})"></div>

the second:

<div ng-style="{backgroundImage: 'url({{example_expression}})'}"></div>

But when i change example_expression, only the first way can dynamically change the backgroundImage.

There is a example in Plunker

What's wrong with ngStyle?

Boothman

Answer 1

ng-style should not contain {{}} interpolation directive, you could directly access scope variable there. Also backgroundImage should be 'background-image'

Markup

<div ng-style="{'background-image': 'url('+ example_expression+')'}"></div>

Demo Plunkr

Fleabitten