インラインJSがdivサイズを壊しているのはなぜですか？

Question

divを描画して背景色を設定すると、完全に機能します。

<div style="border:1px solid #f00; background-color:#00f;width:{{... 

Iが（私はここでは簡略化のために一定のインライン値を使用）カラー動的インラインJS値作​​成しようとすると、次に全体のdivが広い&高い2つの画素に崩壊します。

<div style="border:1px solid #f00; background-color:#{{ "00f"}};width:{{... 

test:#{{ "00f" }} 

test:#00fが正しく表示されます。なぜ私のdivが崩壊するのですか？

Answer 1

ngClassディレクティブを使用すると、追加するすべてのクラスを表す式をデータバインドすることで、HTML要素のCSSクラスを動的に設定できます。

<!-- whatever is typed into this input will be used as the class for the div below --> 
<input type="text" ng-model="textType"> 

<!-- the class will be whatever is typed into the input box above --> 
<div ng-class="textType">Look! I'm Words!</div> 

Answer 2

angularJSで動的スタイルを取得する最も良い方法は、Amitが最初の答えで述べたようにng-classを使用することです。しかし、以下のように、角度可変の値に基づいてNG-クラスを処理するために、常により良いです：素晴らしいが、シンプルがtrueの場合はtrueを、通常、背景が設定されている場合は、この場合には

<div ng-class="{ '00f-background': awesome, 'normal-background': simple } 

、00F-背景クラスが設定されています。

Answer 3

答えはかなり基本的なもので、タグ{{...}}の中の一重引用符でなければなりません - 少なくとも、文字列が一重引用符で囲まれていれば動作します。 。。div要素はゼロサイズに縮小した理由である完全要素

<div style="border:1px solid #f00; background-color:#{{ '00f'}};width:{{... 

正しく動作

は適切にモデルを使用する方法についての提案に感謝 - それは、具体的理由をdiv要素は、その使用により破壊したこの質問に対してやや哲学的ですインラインの