有条件渲染CSS的HTML头 [英] Conditionally-rendering css in html head

问题描述

我想动态添加CSS来采用了棱角分明的js我的HTML头。下面是示例code

I am trying to dynamically add css to my html head using angular js. Here is sample code

<div ng-repeat="stylesheet in stylesheets">
        <link href="/myapp/{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" media="{{stylesheet.media}}" title="{{stylesheet.title}}" />
</div>

这code正常工作，但是当浏览器加载网页，它试图获取同生angularjs模板CSS资源，我看到在Firebug的网络选项卡404未找​​到错误。

This code works as expected, but when browser loads the page, it tries to fetch css resources with raw angularjs templates and I see "404 not found error" in network tab of firebug.

Eg: request http://localhost:8080/myapp/%7B%7Bstylesheet.href%7D%7D, status 404

当页面完全加载，它确实模板值和负载的替代正确的CSS。

When page is completely loaded, it does substitution of template values and loads proper css.

有没有办法来避免404错误，并使其后angularjs处理加载CSS？

Is there a way to avoid 404 error and make it load css after angularjs processing?

推荐答案

您应该使用 NG-HREF 而不是HREF。

You should use ng-href instead of href.

<link ng-repeat="stylesheet in stylesheets" ng-href="{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" />

例

这篇关于有条件渲染CSS的HTML头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！