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

Question

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

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

但是登录后，即使 ng-style 现在显示正确的背景图像 url，样式属性仍然指向默认值 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>

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

Angular ng-style is adding a style attribute that is then not kept in sync

html

css

angularjs

ng-style