2012-06-06 11 views
5

スタイル要素内で角度jsバインディングを使用しようとしていますが、動作していないようです。これはバグですか?これを行うには良い方法がありますか?スタイル要素内のAngularJSが機能しない

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

+0

これは何を達成するはずですか? 2つ以上の配列アイテムがある場合、同じクラス名に対して2つの定義があります。 –

+0

フィーリングは、anglejsがスタイル要素を解析していないことの単なる例でした。私は簡単に.test _ {{test.id}}のようなものを追加して、各クラス名を一意にすることができました。私はdbからの座標に基づいて多くの画像を配置する必要があるプロジェクトに取り組んでいました。 – cmsanche

答えて

7

私は角度がスタイル要素を解析するとは思いません。おそらく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> 

(jsFiddleのような、より多くの角度に優しい)Plunker Demo

+1

plunkerリンクが死んでいます:( –

+0

@JanusTroelsen私はリンクを更新しました –

+2

'a:hover'にいくつかの動的スタイルを与えるためにスタイルタグでこれを行う方法を探しています...アイデアはありますか? – morgs32

1

これは今角度の新しいバージョンで動作します。

ここでhttp://jsfiddle.net/PpyVn/4/は、1.3.0-rc.3に置き換えられた1.0のOPsフィドルです。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script> 
関連する問題