Ich kämpfe mit folgendem Verständnis: Wie kann ich Medien (query) abhängige Stile dynamisch zu Elementen / dem DOM hinzufügen?
Folgende Probleme stieß ich auf:
1) Ich weiß, dass AngularJS Tags nicht manipulieren kann
<style> {{myMediaQueryStyles}} </style> in einer Direktive.
2) Medienabfragen, die als Inline-Stile mit ng-style eingefügt werden, funktionieren auch nicht
Ich habe folgende view-model.json
In einer einfachen Direktive versuche ich einfach, sie in ein <style> -Tag
Gibt es eine Problemumgehung, um medienrelevante Styles dynamisch zu Elementen oder dem gesamten Dokument in angularJS hinzuzufügen?
Ändern der Direktive template: '<div>{{view-model.contexts}}</div>' funktioniert, aber die Stile werden dann nicht angewendet.
Vielen Dank im Voraus!
Eine Problemumgehung wäre das Hinzufügen der relevanten Stile zum Element in der link -Funktion einer benutzerdefinierten Anweisung, wie in diesem gezeigt Plunk .
In einem einfachen Fall, in dem das viewModel direkt in der Steuerung verfügbar gemacht wird, würde die Direktive wie folgt aussehen:
%Vor%Sie können den JSON auch von einer separaten Datei oder Remote-Quelle (wie im Plunk angezeigt) laden, indem Sie die Direktive anpassen:
%Vor%Dies würde eine dynamische Aktualisierung der Stile ermöglichen. Dies wird im Plunk demonstriert, indem der Anweisung, die die Stile nach 3 Sekunden löscht, ein $ timeout hinzugefügt wird (Sie können sehen, dass sich der Text von schwarz nach schwarz ändert).
In beiden Fällen wäre das entsprechende HTML-Markup <style add-styles></style> .
Tags und Links javascript html angularjs css media-queries