2

I have two routes/views in my AngularJS application that are using conflicting CSS. I have two separate external stylesheets that I want to use for these routes. For example foo.css for foo route and bar.css for bar route. That way I can resolve the conflict.

However, I will have to load bar.css and unload foo.css when navigating from foo to bar.

How do I do this? Is there a library/module that can help me to achieve this scenario?

I've looked into ocLazyLoad, but I'm not sure how to unload the loaded CSS.

Slava Fomin II
  • 26,865
  • 29
  • 124
  • 202

1 Answers1

3

AngularJS Way

In a comment below, the OP suggested the way that seems most appropriate to me in AngularJS - using the ng-disabled directive. You just have to make <html> your ng-app attribute element so that the directive gets properly executed.

<link rel="stylesheet" href="/path/to/style-1.css" ng-disabled="theme.name === 'theme1'">
<link rel="stylesheet" href="/path/to/style-2.css" ng-disabled="theme.name === 'theme2'">

This way both styles get loaded immediately (causing no flicker on change later). Different approach would be needed if some of the styles should not be loaded initially.

Original Answer

See this question. Then just find the appropriate <link> tags and enable/disable them at will. I don't think this has anything to do with AngularJS.

Community
  • 1
  • 1
hon2a
  • 7,006
  • 5
  • 41
  • 55
  • Thank you for you answer! However, I can add `ngDisabled` or `ngIf` directive to `` elements, as you suggested, but that way I will not be able to delay view rendering and document will probably look unstyled for some time. I just don't want to [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_content) things up. – Slava Fomin II Nov 25 '14 at 13:31
  • If you trigger disabling using the same variable on the same scope, both ``s will get updated during the same `$digest` (both files will have been loaded on page load). So I wouldn't worry about flicker, the only possible issue is that both of your stylesheets will get applied until the first `$digest` sorts it out. – hon2a Nov 25 '14 at 13:41
  • Well, I don't want them to be loaded optimistically. Not every user of the application will ever use the second route. – Slava Fomin II Nov 25 '14 at 13:54
  • In that case, [there's already a question on SO dealing with the issue](http://stackoverflow.com/questions/17695156/angular-js-load-css-and-js-files-dynamically). – hon2a Nov 25 '14 at 13:58
  • Yeah, thanks ) I saw that question, but it's more generic than mine. I'm probably looking for existing solution that can make it work. – Slava Fomin II Nov 25 '14 at 14:18