So fügen Sie mithilfe der AngularJS-Direktive ein Style-Tag zum Head hinzu
-
02-01-2020 - |
Frage
Hallo, ich erlaube Benutzern, anzugeben, ob sie Berichte im Quer- oder Hochformat drucken möchten.
Ich habe mich gefragt, ob es möglich ist, dies (siehe unten) mithilfe einer AngularJS-Direktive in den Kopf des Webdokuments einzufügen.Auf diese Weise wird die Druckgröße je nach Benutzereingabe geändert.
<style>@media print{@page {size: landscape}}</style>
Lösung
Dies hängt davon ab, ob Sie diese Funktionalität an vielen verschiedenen Orten verwenden werden.Wenn Sie es nur einmal brauchen, kann eine Richtlinie übertrieben sein.
Sie können einfach
setzen <style> @media print {@page { size: {{ orientation }} } }</style>
Innerhalb Ihres Winkelcontrollers und Angabe der Orientierung des $ $ Scope.
an mein Wissen Es ist nicht erforderlich, dass der Stil Tag im Kopf ist.
Andere Tipps
Sie können die NGStyle-Richtlinie verwenden, um CSS bedingten.Siehe angularjs ngStyle
.Das Beispiel am Ende des Links zeigt an, wie dies geht.
Ich musste im Handumdrehen ein benutzerdefiniertes Stylesheet mit eindeutigen IDs erstellen. Ich habe dafür gesorgt, dass es mit AngularJS wie folgt gut funktioniert:
<style type="text/css"
ng-bind="vm.css">
</style>
(Beachten Sie die Verwendung von ng-bind
)
wo vm.css im Controller so aussieht
vm.css = `#${$scope.id} { background-color: red; }`
Hoffe das hilft!