html - AngularJs の ngStyle を使用した背景画像の動的更新

Question

Angular を使用してdiv の backgroundImage を動的に変更すると、backgrond-image を設定する方法が 2 つあります。

最初：

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

二番目：

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

しかし、変更するexample_expressionと、最初の方法だけが backgroundImage を動的に変更できます。

プランカーに例があります

ngStyle の何が問題になっていますか?

Answer 1

ng-style補間ディレクティブを含めない{{}}でください。スコープ変数に直接アクセスできます。またbackgroundImage、する必要があります 'background-image'

マークアップ

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

デモプランカー