Conditionally-rendering css in html head

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?

I made a AngularJS service to use easily the @Artem solution. It's here on GitHub. — Gabriel
– Gabriel, Commented May 16, 2013 at 13:31

Mark Amery · Accepted Answer · 2015-05-15 10:42:01Z

31

You should use ng-href instead of href.

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

Example

edited May 15, 2015 at 10:42

Mark Amery

158k92 gold badges435 silver badges476 bronze badges

answered Aug 11, 2012 at 8:22

Artem Andreev

19.9k5 gold badges46 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gerard Sans · Accepted Answer · 2015-02-02 17:10:07Z

There's a another option using $route.resolve and promises. This will wait until the CSS is actually loaded not only added to the head (after that the browser just starts retrieving the file and depending on CSS size can cause page reflow).

// Routing setup
.config(function ($routeProvider) {
  $routeProvider
  .when('/home', {
      controller: 'homeCtrl', 
      templateUrl: 'home.tpl.html'
  }).when('/users', {
      controller: 'usersCtrl', 
      controllerAs: 'vm',
      templateUrl: 'users.tpl.html',
      resolve: {
        load: ['injectCSS', function (injectCSS) {
          return injectCSS.set("users", "users.css");
        }]
      }
  }).otherwise({
      // default page
      redirectTo: '/home'
  });
})

Service implementation

.factory("injectCSS", ['$q', '$http', 'MeasurementsService', function($q, $http, MeasurementsService){
  var injectCSS = {};

  var createLink = function(id, url) {
    var link = document.createElement('link');
    link.id = id;
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    return link;
  }

  var checkLoaded = function (url, deferred, tries) {
    for (var i in document.styleSheets) {
      var href = document.styleSheets[i].href || "";
      if (href.split("/").slice(-1).join() === url) {
        deferred.resolve();
        return;
      }
    }
    tries++;
    setTimeout(function(){checkLoaded(url, deferred, tries);}, 50); 
  };

  injectCSS.set = function(id, url){
    var tries = 0,
      deferred = $q.defer(),
      link;

    if(!angular.element('link#' + id).length) {
      link = createLink(id, url);
      link.onload = deferred.resolve;
      angular.element('head').append(link);
    }
    checkLoaded(url, deferred, tries);

    return deferred.promise;
  };

  return injectCSS;
}])

You could add a timeout using tries if this is something you would like to include.

Check out this post for more details:https://medium.com/angularjs-meetup-south-london/angular-dynamically-injecting-css-file-using-route-resolve-and-promises-7bfcb8ccd05b

Michael Kisilenko · Accepted Answer · 2015-02-23 12:45:41Z

2

I've created a very simple example of how make a conditionaly css addition

<link rel="stylesheet" ng-if="lang_direction == 'rtl'" ng-href="{{lang_direction == 'rtl' ? 'css/rtl.css' : ''}}" >

answered Feb 23, 2015 at 12:45

Michael Kisilenko

5012 gold badges6 silver badges15 bronze badges

Comments

Chris · Accepted Answer · 2016-12-15 15:26:32Z

0

For anyone wishing to create truly dynamic CSS at runtime with AngularJS this is what I used.

index.html

<head> <style type="text/css" ng-bind-html="styles"></style> </head>

cssService

this.$rootScope.myStyles = ".test { color : red; }";

This is just an example, it may be better for you to put the styles into an indexController if you have one and keep it off the $rootScope

answered Dec 15, 2016 at 15:26

Chris

27.5k49 gold badges208 silver badges358 bronze badges

Collectives™ on Stack Overflow

Conditionally-rendering css in html head

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related