So fügen Sie mithilfe der AngularJS-Direktive ein Style-Tag zum Head hinzu

Question

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>

Answer 1

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.

Answer 2

Sie können die NGStyle-Richtlinie verwenden, um CSS bedingten.Siehe angularjs ngStyle .Das Beispiel am Ende des Links zeigt an, wie dies geht.

Answer 3

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!