AngularJS dentro de un elemento de estilo no funciona

Estoy tratando de usar enlaces js angulares dentro de un elemento de estilo pero parece que no funciona. ¿Es esto un error y hay una mejor manera de hacer esto?AngularJS dentro de un elemento de estilo no funciona

<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/

Fuente

2012-06-06 cmsanche

¿Qué se supone que debe lograr? si tiene más de un elemento de matriz, tendrá 2 definiciones para el mismo nombre de clase –

El violín fue solo un ejemplo de que angularjs no estaba analizando el elemento de estilo. Podría agregar fácilmente algo como .test _ {{test.id}} para hacer que el nombre de cada clase sea único. Estaba trabajando en un proyecto en el que necesitaba posicionar una gran cantidad de imágenes basadas en coordenadas de un DB. – cmsanche

No creo angular analiza elementos de estilo. Es posible que desee utilizar la directiva 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 (como jsFiddle, pero más angular de usar) Demo

Fuente

2012-06-06 01:06:06 btford

el enlace de plunker está muerto :( –

@JanusTroelsen He actualizado el enlace –

Me gustaría encontrar una forma de hacerlo en una etiqueta de estilo para darle a 'a: hover' algunos estilos dinámicos ... ¿Alguna idea? – morgs32

Esto ahora trabaja en nuevas versiones de angular.

Aquí http://jsfiddle.net/PpyVn/4/ es el fiddle OPs con 1.0 reemplazado con 1.3.0-rc.3.

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

Fuente

2014-09-29 04:16:07 jpillora

AngularJS dentro de un elemento de estilo no funciona

Respuesta

Cuestiones relacionadas