Remove dynamic stylesheets added

[xzegga]

how I can remove all dynamic stylesheets added before add new stylesheet in header on a single page application?

[GabrielDelepine]

Thanks for open this issue.

I updated the code to allow this feature.

Check the readme file.

[drelei]

Thanks for adding this feature. I am noticing the behavior of "add" happening before the "removeAll" happening. Let me know if I'm setting this up properly

// app.js using ui-router
app.config(function($stateProvider, $urlRouterProvider, cssInjectorProvider) {
    cssInjectorProvider.setSinglePageMode(true);
    ...
    .state('users', {
            url: "/users",
            parent: 'authenticated',
            templateUrl: "/views/users/list.html",
            controller: 'UsersListCtrl',
            title: 'Users'
        })

// usersController.js
usersControllers.controller('UsersListCtrl', function ($scope, $http, cssInjector) {
    cssInjector.add("/css/pages/users/userList.css");

When I load the user list page, the proper style(body {color: red;}) gets applied from userList.css. Then I navigate to some other page like settings and the styling is removed as I see the removeAll call.

However, when I navigate to the user list page again, I see "add" being called in the console before the removeAll, essentially erasing the userList.css inclusion.

Please let me know if you have any insights.

[GabrielDelepine]

Hi @drelei : The function removeAll is fired on the event $locationChangeStart.

In my personal project, I'm doing a lazy loading for css and js files, so $locationChangeStart is always called before my controller be load.

Your example is an interesting case. Unfortunately I only have a dirty solution to recommend you today :

$timeout(function(){ cssInjector.add("/css/pages/users/userList.css"); }, 50); // 50ms is probably enough in all the case.

I'm looking for a clean fix, but I don't have enough time this days.

I reopen this issue until a clean fix be found.

[drelei]

Hi @yappli ,

Thank you for your suggestion and the continued support of the project when available. I'm not sure if it's the way ui-router works, but I'm seeing the controller fired (add activity) before the $locationChangeStart which wipes everything out with the removeAll. I tried a workaround by performing the add via $locationChangeSuccess. However, it has a residual issue where going to the next page will end up performing the add from Page 1.

Hope that helps,

• Dre