将 CSS 注入指令

Question

我有一个指令，我想为该指令注入一些CSS。

由于同一页面中可能有多个指令，因此我想避免多次注入该 CSS。我应该使用什么方法？ .run ？ .config ？

另外，我将如何注入该 CSS？

为了这个例子，假设我只想注入.my-item { background: blue; }

Answer 1

您可以通过执行以下操作在 angular 中添加一些生成的 CSS：

angular.element(document).find('head').prepend('<style type="text/css">.my-item { background: blue; }</style>');

为了确保不会多次注入，您可以创建一个服务CssSvc，它可以跟踪生成的 CSS 是否已被注入。

app.service('CssSvc', function () {
    var svc = this;
    // keep track if injected
    svc.injected = false;
});

然后，您可以将服务注入到指令中，并且仅在尚未运行时运行上述代码。

if(!CssSvc.injected) {
    angular.element(document).find('head').prepend('<style type="text/css">.my-item { background: blue; }</style>');
    CssSvc.injected = true;
}