CODEWITHSUNDEEP
angularjs
akonsu
akonsu

Reputation: 29536

stylesheet links in controller

my source data contains URLs pointing to css files and I need to load these files when my template is rendered.

a controller has something like this:

$scope.links = myData.query();

and in the view I tried this:

<link ng-repeat="link in links" rel="stylesheet" type="text/css" href="{{link}}">

of course, before angular gets to filling in the {{link}} part, the browser complains about the URL {{link}} that it does not exist.

so I ended up with just emitting markup instead of the links:

$scope.links = "<link rel=\"stylesheet\" type=\"text/css\" href=\"http://example.com\">";

and in the template:

<div ng-bind-html-unsafe="links"></div>

I cannot even use ng-bind-html I have to use the unsafe version.

Is there a better way to achieve this?

Upvotes: 2

Views: 1342

Answers (2)

crisam
crisam

Reputation: 65

When you are always using AngularJS hash tags normally must have the appropiate directive module in this case ngHref. If you don't use this you will most likely return a 404 error until angular has time to replace the link with the appropiate URL.

Here refer to the Documentation for more information.
https://docs.angularjs.org/api/ng/directive/ngHref

Upvotes: 0

Justen
Justen

Reputation: 4869

You would want to use ngHref.

<link ng-repeat="link in links" rel="stylesheet" type="text/css" ng-href="{{link}}">

Upvotes: 3

Related Questions