Delay and Manually initialize mdl materialLayout

Question

Strange bug.....

• I have a race condition where my angularJS directives for header and drawer are compiling after material-design-lite initializes the layout.

• It only seems to happen when I shut my wifi off and work offline. No remote resources are required, though google tag manager, and facebook connect plugin fail in the network tab.

Questions:

1. Can I delay MDL's automatic initialization (which I see happens onload of the page?
2. Can I manually reinitialize the mdl-layout so that it properly constructs the drawer button, etc., all over again?
3. Does anyone have any idea why being offline would cause any rendering/javascript issues?

I have already tried window.componentHandler.upgradeAllRegistered() but that doesn't reinitialize the layout

Answer 1

Here's how I solved the problem in case anyone else runs into this (mdl race condition with angular):

1. Load the material.js library once the header directive has loaded
2. wait for window.componentHandler
3. Then run window.componentHandler.upgradeAllRegistered();

Full code (placed in header directive)

function materialize(){
        var script = document.createElement('script');
        script.src = 'assets/js/material.js';
        document.body.appendChild(script);
        (function upgrade(){
            if (!window.componentHandler){
                return $timeout(upgrade, 200);
            }
            $timeout(window.componentHandler.upgradeAllRegistered);
        })();
}