0

我的 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 和脚本，并显示页面处于不同状态时的阶段。但我听从你的判断:)

4

1 回答 1

1

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

标记

<div class="background-div" 
   ng-style="{'background-image': 'url('+user.profile.Customer.BackgroundImageUrl || 
   '../images/bg.jpg'+')'}">
</div>
于 2015-09-09T22:05:27.727 回答