<分区>
<分区>
我的 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 和脚本,并显示页面处于不同状态时的阶段。但我尊重你的判断:)
最佳答案
ng-style
不应包含 {{}}
插值,您可以在其中使用直接作用域变量。
标记
<div class="background-div"
ng-style="{'background-image': 'url('+user.profile.Customer.BackgroundImageUrl ||
'../images/bg.jpg'+')'}">
</div>
关于html - Angular ng-style 正在添加一个样式属性,然后不保持同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32489828/