动态刷新背景图像与ngStyle在AngularJs [英] Dynamic refresh background-image with ngStyle In AngularJs

问题描述

当我使用Angular到动态变化div的backgroundImage 时，我发现有两种方法来设置backgrond-image：

strong> first：

< div style =background：url（{{example_expression}}）> / div>

第二个：

< < div ng-style ={backgroundImage：'url（{{example_expression}}）'}>< / div>

但是当我改变 example_expression 时，只有第一种方式才能动态改变backgroundImage。

Plunker 中有一个示例

ngStyle有什么问题？

解决方案

ng-style 不应该包含 {{}} interpolation指令，可以直接访问scope变量。此外 backgroundImage 应为'background-image'

标记

 < div ng-style ={'background-image'：'url '+ example_expression +'）'}>< / div> 
  

演示Plunkr

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?

解决方案

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

这篇关于动态刷新背景图像与ngStyle在AngularJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！