如何使用 angularjs 指令向头部添加样式标签答案

【问题标题】：How to add a style tag to the head using angularjs directive如何使用 angularjs 指令向头部添加样式标签
【发布时间】：2014-09-25 03:30:55
【问题描述】：

您好，我允许用户指定他们希望以横向还是纵向格式打印报告。

我想知道是否可以使用 angularjs 指令将此（见下文）添加到 Web 文档的头部？这样，它将根据用户输入改变打印尺寸。

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

【问题讨论】：

【解决方案1】：

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

你可以简单的把

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

在您的角度控制器中，并在 $scope 上指定方向。

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

【讨论】：

【解决方案2】：

您可以使用 ngStyle 指令有条件地应用 css。见AngularJS ngStyle。链接末尾的示例显示了如何执行此操作。

【讨论】：

【解决方案3】：

我不得不使用唯一的 ID 即时创建自定义样式表，我使它与 angularJS 很好地配合使用，如下所示：

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

（注意使用ng-bind）

vm.css 在控制器中的样子

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

希望这会有所帮助！

【讨论】：