Angular ng-style 正在添加一个样式属性，然后不保持同步 [重复]

Question

我的 Angular 网站从 Web API 后端获取数据，最初显示的是通用背景。但登录后，客户背景图片 url 被检索并用于我的 ng-style 属性中。

当页面最初加载时，还会出现一个不在源代码中的样式属性，它将背景指向默认图像。

但是登录后，即使 ng-style 现在显示正确的背景图片 url，style 属性仍然指向默认 url。

如果我手动刷新页面（Chrome 的开发者设置中没有缓存），样式属性会更新，客户背景也会正确显示。

发生了什么事？为什么 Angular 会添加样式属性，然后不保持同步？

源代码

<div class="background-div" ng-style="{'background-image': 'url({{user.profile.Customer.BackgroundImageUrl || '../images/bg.jpg'}})'}"></div>

初始页面加载

<div class="background-div" ng-style="{'background-image': 'url(../images/bg.jpg)'}" style="background-image: url(http://localhost:10223/images/bg.jpg);"></div>

登录后

<div class="background-div" ng-style="{'background-image': 'url(http://megacorp.com/images/vipcustomer.jpg)'}" style="background-image: url(http://localhost:10223/images/bg.jpg);"></div>

强制无缓存刷新后

<div class="background-div" ng-style="{'background-image': 'url(http://megacorp.com/images/vipcustomer.jpg)'}" style="background-image: url(http://megacorp.com/images/vipcustomer.jpg);"></div>

固定代码

  <div class="background-div"
       ng-style="{'background-image': 'url(' + (user.profile.Customer.BackgroundImageUrl || '../images/bg.jpg') + ')'}">
  </div>

重新打开：

恕我直言，这个问题是不同的 b/c 它停留在 html 中，没有进入 $digest 和脚本，并显示页面处于不同状态时的阶段。但我听从你的判断:)

Answer 1

ng-style 中不应包含 {{}} 插值，您可以在其中使用直接作用域变量。

标记

<div class="background-div" 
   ng-style="{'background-image': 'url('+user.profile.Customer.BackgroundImageUrl || 
   '../images/bg.jpg'+')'}">
</div>