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

问题描述

当我使用 Angular 来动态改变 div 的 backgroundImage 时，我发现有两种方法可以设置背景图像:

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

第一:

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

第二个:

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

但是当我改变example_expression时，只有第一种方式可以动态改变backgroundImage.

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

Plunker

ngStyle 有什么问题?

推荐答案

ng-style 不应包含 {{}} 插值指令，可以直接访问作用域变量那里.另外 backgroundImage 应该是 'background-image'

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

标记

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

演示 Plunkr

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