Load dynamic CSS on index.html in AngularJS

Question

I have an AngularJS SPA. During the app's init I get a theme from the server, which includes a couple CSS URLs.

I want to use these, and fallback to a default if they 404.

I thought I could setup a simple directive to accomplish this but I can't get it to work right.

.directive('errorHref', function() {
    return {
        link: function(scope, element, attrs) {
            element.bind('error', function() {
                attrs.$set('ng-href', attrs.errorHref);
            });
        }
    }
});

HTML: note, the controller is working; however, _init events in headController are firing before everything else.

<html ng-app="timeclock">
    <head ng-controller="headController">
        <link ng-href="{{urlToAppCSS}}" error-href="content/css/app.css" rel="stylesheet">

Is this the right approach or is there a better way? Everything seems like it should be functioning properly (and works in almost identical situations in other parts of my app), but the element.bind('error'... function never actually fires.

Are you sure that <link> elements trigger an error when their resource cannot be loaded? I know this works with images, but I've not seen it with link before. — Anid Monsur
– Anid Monsur, Commented Aug 29, 2015 at 22:43
@AnidMonsur Great question and I have no idea :P Any suggestions on an other way to solve this? I thought about use <link href=default.css> and then in my controller using element.href=newHrefUrl but that seems kludgy. — Joshua Ohana
– Joshua Ohana, Commented Aug 29, 2015 at 23:04

Anid Monsur · Accepted Answer · 2015-08-29 23:26:14Z

1

I'm not sure that <link> elements trigger an error event. So I'd suggest using a directive and <style> elements. Note that there are a lot of ways to potentially do something like this, and this is just an over-simplified example:

.directive('customStyle', function($http) {
    return {
        restrict: 'E',
        scope: {
            href: '@',
            fallback: '@'
        },
        link: function(scope) {
            $http.get(scope.href)
                    .then(function(response) {
                        // Take the contents of the response and place into
                        // a scope variable for use in the template
                        scope.css = response.data;
                    })
                    .catch(function(response) {
                        // The request failed, so instead try loading from scope.fallback url.
                    });
        },
        template: '<style>{{ scope.css }}</style>'
    }
});

HTML:

<custom-style href="{{ urlToAppCSS }}" fallback="content/css/app.css"></custom-style>

You'd probably want to load the fallback CSS simultaneously so that there's not a long delay in case the requested CSS file couldn't be loaded, but this could be a good starting point.

answered Aug 29, 2015 at 23:26

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

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

2 Comments

Joshua Ohana Over a year ago

Thanks @Andi, I ended up going a simpler route inspired by your idea but I think this would have worked. My answer below...

Anid Monsur Over a year ago

Glad to help, but you should use a directive if you're modifying the DOM. Doing that in a controller is a bad practice.

Joshua Ohana · Accepted Answer · 2015-08-30 15:54:18Z

I ended up keeping it really basic just making an $http call in my controller and changing the href value if needed, seems to work very cleanly. Loads up the CSS hard coded into the link tag, then when my theme gets loaded up an event fires triggering the controller's code, swapping out the href value on $http success.

<link id="appCSS" href="content/css/app.css" rel="stylesheet">

Controller

        var appCSS = angular.element('#appCSS');

        // Try appCSS
        $http.get(theme.urlToAppCSS).then (function (response) {
            // GET succeeded, load up new CSS
            appCSS.attr('href', theme.urlToAppCSS);
        }, function (err) {
            // GET failed, keep default CSS in place
        });

Collectives™ on Stack Overflow

Load dynamic CSS on index.html in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related