CSS load after JS in Controller

[jonatasfreitasv]

Hello ,

have the following problem , I am using ui- router- style to load a css per route , for example:

 $stateProvider
    .state( 'login' , {
        url: '/login'
        templateUrl 'components/login/form.html'
        date : { css : 'components/login/style.css'} ,
        controller: 'LoginCtrl'
    } ) ;

What is happening is that the CSS is loaded after the js within the controller runs , causing problems .

How can I fix this?

[manuelmazzuola]

How is possible if the css is injected by the js ? Try to explain the problem you're trying to solve, maybe I can help you.

[jonatasfreitasv]

For example:

$stateProvider
    .state( 'login' , {
        url: '/login'
        templateUrl 'components/login/form.html'
        date : { css : 'components/login/style.css'} ,
        controller: 'LoginCtrl'
    } ) ;

in form.html i have:

<div class='foo'></div>

in style.css i have:

.foo {height: 200px;}

in controller i have:

alert($('.foo').heigth());

and the alert show 0px for height.

[manuelmazzuola]

Wait, but is data and not date!

[jonatasfreitasv]

Yes, is data, not date, i wrote wrong here.

[manuelmazzuola]

Well, the CSS is injected by the directive as soon as possible when the state changes successfully, then the browser get it and load it. A solution can be to delay your controller. Another solution, maybe the better one, is to fire an event when the css is loaded and then you can catch it in the controller.

[jonatasfreitasv]

Delay is not a good idea because the css load depends on the client connection.

What would be the event that you suggested ?

[antoescu]

I am having the same problem. There is a flicker because the html gets loaded and after that the css, so the transition between no css and the css loaded can be seen, making a bad visual effect.

Is there any solution to this?

[unleashit]

Also having the same problem. Unfortunately, if there's not a solution to make the css load faster I can't use. It's a shame because its such a cool solution otherwise. In our case, There is a very long moment where the html renders without the extra CSS. In this time, menus that are styled and vertical display horizontally with bullets, etc.

[manuelmazzuola]

Can that link be a solution ? http://www.phpied.com/when-is-a-stylesheet-really-loaded/ I've partially implemented it in the branch bug#7 resolving the bug #7

[zhaocnus]

I created a Angular Service which returns a promise. The promise is resolved after the CSS file(s) is loaded. This works in my case.

https://github.com/zhaocnus/css-load-for-angular-ui-router-styles

[unleashit]

Hi everyone, my apologies that I never responded but a month ago I was in the middle of trying to meet a big deadline. Manuelmazzoula, when I had not been working with your latest updates to the ui router version. Once I updated, the delay improved significantly. It isn't always perfect, but using ng-animate, I was able hide the content area until everything was rendered and now its perfect.

[manuelmazzuola]

Is this fixed?