有条件地在html头中渲染css

Question

我试图使用角度js动态地将CSS添加到我的html头部.这是示例代码

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

此代码按预期工作,但当浏览器加载页面时,它尝试使用原始angularjs模板获取css资源,我在firebug的网络选项卡中看到"404 not found error".

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

当页面完全加载时,它会替换模板值并加载正确的css.

有没有办法避免404错误并使其在angularjs处理后加载css？

Answer 1

您应该使用ng-href而不是href.

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

例

Answer 2

我制作了一个AngularJS服务,可以轻松使用@Artem解决方案.

它在GitHub上.