Question

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>

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

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

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

Answer 1

You should use ng-href instead of href.

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

Example