AngularJS in einem Stilelement funktioniert nicht

Ich versuche, noch in einem Stil Element Winkel js Bindungen zu verwenden, es scheint nicht zu funktionieren. Ist das ein Fehler und gibt es einen besseren Weg, dies zu tun?AngularJS in einem Stilelement funktioniert nicht

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

Quelle

2012-06-06 cmsanche

was soll das erreichen? Wenn Sie mehr als ein Array-Element haben, haben Sie 2 Definitionen für denselben Klassennamen –

Die Geige war nur ein Beispiel, dass angularjs das style-Element nicht analysierte. Ich könnte leicht etwas wie .test _ {{test.id}} hinzufügen, um jeden Klassennamen eindeutig zu machen. Ich arbeitete an einem Projekt, bei dem ich viele Bilder basierend auf Koordinaten aus einer Datenbank positionieren musste. – cmsanche

Ich glaube nicht, Angular Stilelemente analysiert. Sie wollen wahrscheinlich die ngstyle Direktive verwenden:

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 (wie jsFiddle, aber kantiger freundlich) Demo

Quelle

2012-06-06 01:06:06 btford

der Plunker Link ist tot :( –

@JanusTroelsen ich den Link –

aktualisiert würde ich einen Weg, dies zu tun in einem Stil-Tag zu geben, um mit 'finden mag: hover' einige dynamischen Arten ... Irgendwelche Ideen? – morgs32

Dies funktioniert nun in neueren Versionen von Angular.

Hier http://jsfiddle.net/PpyVn/4/ ist die OPs Geige mit 1,0 ersetzt mit 1.3.0-rc.3.

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

Quelle

2014-09-29 04:16:07 jpillora

AngularJS in einem Stilelement funktioniert nicht

Antwort

Verwandte Themen