在运行时更改AngularJs中背景图像的最佳方法
Posted
技术标签:
【中文标题】在运行时更改AngularJs中背景图像的最佳方法【英文标题】：Best approach to change background image in AngularJs at runtime 【发布时间】：2015-11-11 00:50:43 【问题描述】：我想创建允许我更改任何部分的背景图像的通用功能。经过提供的选项后，我发现了这两种方法。想要选择更改图像的最佳方法，因为在单个页面上我想多次更改背景设施。它将提供给四到五个部分。
接近
使用指令检查此堆栈溢出link。
还有另一种角度范围变量的方法，我们可以在运行时更新。
<div ng-style="'background-image': 'url(/images/' + backgroundImageUrl + ')'"></div>
必需的用法（关于指令）
<body>
<section backgroundImage url="backgroundImageUrl1">
...
</section>
<section backgroundImage url="backgroundImageUrl2">
...
</section>
<section backgroundImage url="backgroundImageUrl3">
...
</section>
<section backgroundImage url="backgroundImageUrl4">
...
</section>
</body>
如上所示，我将为每个部分更新 background-image 属性。如果在 CSS 文件中设置这些属性，它将减少加载图像的时间，即如果我们直接在 html 中添加内联 css 样式，所有图像将在 DOM 加载时加载。它将向服务器发出额外请求以获取图像并将它们加载到 DOM 中。我想遵循可以减少我的 SPA（单页应用程序）加载时间的策略。
【问题讨论】：
backgroundImage url="backgroundImageUrl2" 这是最好的选择。和可重用的代码 【参考方案1】：我认为使用<div ng-style="'background-image': 'url(/images/' + backgroundImageUrl + ')'"></div> 应该更有效。
你不会引入另一层复杂性，指令创建范围，观察和消化，指令也必须在开始时编译。
使用 symple ng-style 以及来自控制器属性的一些特定 url 应该只请求该特定的活动图像。因此，我认为它应该是最佳解决方案。
【讨论】：
以上是关于在运行时更改AngularJs中背景图像的最佳方法的主要内容，如果未能解决你的问题，请参考以下文章