如何使用angularjs指令在头部添加样式标签

Question

你好，我允许用户指定他们是否想要以横向或纵向格式打印报告。

我想知道是否有可能使用angularjs指令将此(见下文)添加到web文档的头部?这样，它就会根据用户的输入来改变打印尺寸。

<style>@media print{@page {size: landscape}}</style>

Answer 1

这取决于您是否打算在许多不同的地方使用此功能。如果你只需要它一次，那么指令可能是多余的。

你可以简单地把

<style> @media print {@page { size: {{ orientation }} } }</style>

，并在$scope中指定方向。

据我所知，样式标签不需要在头部

Answer 2

你可以使用ngStyle指令来有条件地应用css。参见AngularJS ngStyle。链接末尾的示例展示了如何做到这一点。

Answer 3

我必须用唯一的id动态创建自定义样式表，我让它像这样很好地与angularJS一起工作:

<style type="text/css"
               ng-bind="vm.css">
        </style>

(注意使用ng-bind)

其中vm.css在控制器

中看起来像这样

vm.css = `#${$scope.id} { background-color: red; }`

希望这对你有帮助!