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

标签 html css angularjs ng-style

<分区>

我的 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/

上一篇:javascript - "stats overview"使用 Bootstrap 等工具的功能?

下一篇:html - 我的第一个选项卡在下面的段落中运行。如何防止这种情况发生?

相关文章:

javascript - 捕获所有路由参数

javascript - 输入 Controller 调用函数 angularJS

html - div的位置不对

html - 与 CSS 绝对定位混淆

javascript - 将 html 放在 javascript 字符串中?

css - 高度:auto interact with line-height:0 and different font-size怎么算

javascript - Jquery Mobile 用户界面网格

css - 如何将我的导航选项均匀地分成 2 行?

css - 如何使 flexbox 尺寸强制容器的增长

javascript - 加载 View 时,angularjs GET url