AngularJS all'interno di un elemento di stile non funzionante

Sto provando a utilizzare i collegamenti js angolari all'interno di un elemento di stile, ma non sembra funzionare. È un bug e c'è un modo migliore per farlo?AngularJS all'interno di un elemento di stile non funzionante

<style ng-repeat="test in styles"> 
.test { 
    background-color: {{ test.backgroundColor }}; 
    display: {{ test.display }}; 
    width: {{ test.width }}; 
    height: {{ test.height }}; 
    } 
</style>

http://jsfiddle.net/cmsanche/PpyVn/

fonte

2012-06-06 cmsanche

cosa dovrebbe comportare? se hai più di un elemento dell'array avrai 2 definizioni per lo stesso nome di classe –

Il violino era solo un esempio che angularjs non stava analizzando l'elemento di stile. Potrei aggiungere facilmente qualcosa come .test _ {{test.id}} per rendere unico ogni nome di classe. Stavo lavorando a un progetto in cui avevo bisogno di posizionare molte immagini basate sulle coordinate di un db. – cmsanche

Non credo angolare analizza elementi di stile. Probabilmente si desidera utilizzare la direttiva ngStyle:

http://docs.angularjs.org/api/angular.module.ng.$compileProvider.directive.ngStyle

<!doctype html> 
<html ng-app> 
<head> 
<script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script> 
</head> 
<body> 
<div ng-init="styles=[{backgroundColor: 'red', width:'100px', height: '100px', display: 'block'}]"> 

<div ng-repeat="test in styles" ng-style="test"> 
.test { 
    background-color: {{ test.backgroundColor }}; 
    display: {{ test.display }}; 
    width: {{ test.width }}; 
    height: {{ test.height }}; 
    } 
</div> 
</html>

Plunker (come jsFiddle, ma più angolare-friendly) Demo

fonte

2012-06-06 01:06:06 btford

il collegamento plunker è morto :( –

@JanusTroelsen Ho aggiornato il collegamento –

Mi piacerebbe trovare un modo per farlo in un tag di stile per dare 'a: hover' alcuni stili dinamici ... Qualche idea? – morgs32

Questo ora lavora nelle versioni più recenti di angolare.

Qui http://jsfiddle.net/PpyVn/4/ è il violino degli OP con 1.0 sostituito con 1.3.0-rc.3.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>

fonte

2014-09-29 04:16:07 jpillora

AngularJS all'interno di un elemento di stile non funzionante

risposta

Problemi correlati