angularjs : équivalent ng-src pour background-image:url(...)

Question

Dans angularjs, vous avez le balise ng-src ce qui a pour but de ne pas recevoir une erreur pour une url invalide avant qu'angularjs n'évalue les variables placées entre {{ y }} .

Le problème est que j'utilise un certain nombre de DIV avec une balise background-image fixé à une url. Je fais cela grâce à l'excellente propriété CSS3 background-size qui recadre l'image à la taille exacte du DIV.

Le seul problème est que je reçois beaucoup d'erreurs pour la même raison qu'ils ont créé une balise ng-src : J'ai des variables dans l'url et le navigateur pense que l'image n'existe pas.

Je réalise qu'il y a une possibilité d'écrire un grossier {{"style='background-image:url(myVariableUrl)'"}} mais cela semble "sale".

J'ai beaucoup cherché et je n'ai pas trouvé la bonne façon de procéder. Mon application est en train de devenir un désordre à cause de toutes ces erreurs.

Answer 1

Celui-ci fonctionne pour moi

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>

Answer 2

ngSrc est une directive native, il semble donc que vous vouliez une directive similaire qui modifie l'attribut background-image le style.

Vous pouvez écrire votre propre directive qui fait exactement ce que vous voulez. Par exemple

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});​

que vous invoquerez comme suit

<div back-img="<some-image-url>" ></div>

JSFiddle avec des chats mignons en prime : http://jsfiddle.net/jaimem/aSjwk/1/

Answer 3

La réponse ci-dessus ne prend pas en charge l'interpolation observable (et m'a coûté beaucoup de temps à essayer de déboguer). Le site Lien vers jsFiddle dans le commentaire de @BrandonTilley se trouve la réponse qui a fonctionné pour moi, que je vais réafficher ici pour la conserver :

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover'
            });
        });
    };
});

---

Exemple utilisant un contrôleur et un modèle

Contrôleur :

$scope.someID = ...;
/* 
The advantage of using directive will also work inside an ng-repeat :
someID can be inside an array of ID's 
*/

$scope.arrayOfIDs = [0,1,2,3];

Modèle :

Utiliser dans le modèle comme suit :

<div back-img="img/service-sliders/{{someID}}/1.jpg"></div>

ou comme ça :

<div ng-repeat="someID in arrayOfIDs" back-img="img/service-sliders/{{someID}}/1.jpg"></div>

Answer 4

Il est également possible de faire quelque chose comme cela avec ng-style :

ng-style="image_path != '' && {'background-image':'url('+image_path+')'}"

qui ne tenterait pas de récupérer une image inexistante.

Answer 5

Similaire à la réponse de Hooblei, mais avec une interpolation :

<li ng-style="{'background-image': 'url({{ image.source }})'}">...</li>