使用媒体查询的 Angular.js 数据绑定背景图像答案

【问题标题】：Angular.js data-bind background images using media queries使用媒体查询的 Angular.js 数据绑定背景图像
【发布时间】：2014-01-26 19:55:32
【问题描述】：

我有一个带有动态背景图像的 Angular.js 应用程序（应该为其 URL 进行数据绑定）。我还想使用 css 媒体查询来检测方向/像素密度等。

我找到的唯一解决方案是使用 javascript 将 URL 添加到背景图像，如下所示：

myDiv.css({'background' : 'url('+ scope.objectData.poster +') no-repeat', 'background-size':'auto 100%'});

这样我必须将所有媒体查询逻辑传递给 javascript，例如 this。（我的目的是能够为每个屏幕分辨率/像素密度/方向提供不同的背景图像）

我正在寻找一种更简洁的解决方案来使用 css 媒体查询并且仍然能够对我的图像源进行数据绑定。

tnx！

亚尼夫

【问题讨论】：

【解决方案1】：

这只是解决您的问题的起点。

if (window.matchMedia("(min-width: 400px)").matches) {
    $scope.poster = 'small.png';
} else {
    $scope.poster = 'big.png';
}

现在您可以在 html 文件中使用它了：

<div class="moments-preview-image" 
    ng-style="{'background-image': 'url('+poster+ ')'}"> ... </div>

如果您的浏览器不支持这个新 API，您可以看看一些有趣的解决方法：

【讨论】：

matchMedia 解决方案非常适合我（我正在为移动设备开发）。 Tnx！
@Yaniv Windows Phone 设备怎么样？ MDN says that IE Mobile isn't supported
哦 - 可能是...我只为 iOS 和 Android 设备开发。使用 Polyfill 怎么样？你找过一个吗？（例如：github.com/paulirish/matchMedia.js）。祝你好运！
哇，永远不知道我们能做到这一点。我试过ng-style="'background-image','url('+card.thumb+')'" 但失败了，不知道为什么。也许它只支持{'a':'b'} 语法。
根据文档 ng-style 仅支持计算结果为 {'css property key' : css value} 对象的表达式。