web-dev-qa-db-fra.com

AngularJS - rendu de style css en ligne

Est-il possible/et comment/d'écrire du style CSS en ligne en utilisant des variables angulaires?

<div style="background: transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat;"></div>

C'est ma sortie 

"NetworkError: 404 Not Found - http://test/eventInfo.eventHeaderImg"

Donc, je vois que cela n'a pas rendu cette valeur.

Je sais qu'il est possible de changer cela dans le contrôleur, mais est-ce faisable avec mon approche?

htmlcssangularjs
13
Djomla

Vous devriez utiliser ngStyle :

un exemple: http://plnkr.co/edit/qT8skZzTwXjrh3Ye5mr9?p=preview

<div ng-style="{ background: 'transparent url({{ eventInfo.eventHeaderImg }}) top center no-repeat' }"></div>
19
Ilan Frumer

Cela a fonctionné pour mon:

<div ng-style="{ 'background': 'transparent url(' + eventInfo.eventHeaderImg + ') top center no-repeat' }"></div>
4
Backer

Vous "écrivez" une mauvaise URL dans votre style, c'est pourquoi vous avez une erreur 404 (introuvable).

Selon this plunker , si votre $scope est bien configuré, vous imprimez les bonnes données dans l'attribut style.

Notez que votre variable de portée eventInfo doit être une carte/un objet.

0
blint