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:

Can I delay MDL's automatic initialization (which I see happens onload of the page?
Can I manually reinitialize the mdl-layout so that it properly constructs the drawer button, etc., all over again?
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

why not just `componentHandler.upgradeElement(document.body)` when your angular has fully commited the DOM to the browser? — ClojureMostly, Nov 25 '16 at 07:10

score 1 · Accepted Answer · answered Nov 24 '16 at 00:07

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

Load the material.js library once the header directive has loaded
wait for window.componentHandler
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);
        })();
}

CHAMP!! same problem with SharePoint – bresleveloper Apr 05 '19 at 07:19 — bresleveloper, Apr 05 '19 at 07:19

Delay and Manually initialize mdl materialLayout

1 Answers1