Angular.js Images d'arrière-plan de raccords de données à l'aide de requêtes multimédias

Question

J'ai une application angular.js avec des images de fond dynamique (doit avoir une liaison de données pour leur URL).Je souhaite également utiliser des requêtes de média CSS afin de détecter une densité d'orientation / pixel, etc.

La seule solution que j'ai trouvée utilise JavaScript pour ajouter URL à l'image d'arrière-plan, quelque chose comme ceci:

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

De cette façon, je dois transmettre la logique de tous les médias à JavaScript, quelque chose comme Ceci.(Mon intention est de pouvoir servir une image de fond différente pour chaque densité de résolution / pixelle / orientation / orientation)

Je cherche une solution plus propre pour utiliser les requêtes de média CSS et être en mesure de lier des données mes sources d'image.

tnx!

yaniv

Answer 1

Ce n'est qu'un point de départ résolvant votre problème.

Vous pouvez utiliser MatchMedia: https://developer.mozilla.org / fr-nous / docs / Web / API / Window.Matchmedia

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

Maintenant, vous pouvez l'utiliser dans le fichier HTML:

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

Si votre navigateur ne prend pas en charge cette nouvelle API, vous pouvez avoir un coup d'œil sur des solutions de contournement intéressantes:

http://wicky.nillia.ms/enquire.js/

http://davidwalsh.name/device-state-detection-CSS-Media-Queries-JavaScript