Warum bricht meine Inline-JS meine Div-Größe?

Question

Wenn ich ein Div zeichnen und Hintergrundfarbe einstellen, funktioniert es perfekt.

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

Wenn ich versuche, die Farbe ist ein dynamischer Inline JS Wert (I hier einen festen Inline-Wert der Einfachheit halber verwenden), um dann die ganze div kollabiert auf 2 Pixel hoch & breit.

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

test:#{{ "00f" }} 

test:#00f wird danach korrekt angezeigt. Warum bricht mein div zusammen? Ich verwende dynamische Werte für die Breite und es liebt es gut

Answer 1

Die Direktive ngClass ermöglicht es Ihnen, CSS-Klassen für ein HTML-Element dynamisch festzulegen, durch Datenbindung einen Ausdruck, der alle hinzuzufügenden Klassen darstellt.

Answer 2

Der beste Weg, die dynamischen Stile mit angularJS zu bekommen, wäre mit ng-Klasse, wie Amit in der ersten Antwort erwähnt hat. Allerdings ist es immer besser ist, ng-Klasse wie unten anhand von Winkelvariablenwerten zu handhaben:

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

In diesem Fall 00f-Hintergrundklasse ist gesetzt, wenn genial echter und normaler-Hintergrund wird gesetzt, wenn einfach wahr ist .

Answer 3

Die Antwort war ziemlich einfach, das doppelte Zitat "in den Tags {{}} sollte ein einfaches Zitat sein" - zumindest funktioniert es, wenn die Zeichenfolge als einfache Anführungszeichen umgeben ist vollständig Element, weshalb die div der Größe Null schrumpfen

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

Werke richtig zu schätzen wissen, die Vorschläge über das Modell richtig verwendet -.. aber das ist etwas philosophisch für diese Frage, die spezifisch war, warum die div mit dieser Verwendung zu brechen wurden