Delay and manual initialization of mdl materialLayout

Question

Strange mistake .....

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

• As if this happens when I close my Wi-Fi and work offline. No remote resources are required, although the google tag manager and the plugin for connecting to facebook do not work on the network tab.

Questions :

• Is it possible to delay the automatic initialization of MDL (what I see is happening onload on the page?
• Can I manually reinitialize the mdl layout so that it properly constructs the box button, etc. again?
• Does anyone know why offline problems may occur with rendering / javascript?

I already tried window.componentHandler.upgradeAllRegistered() but this does not repeat layout initialization

Answer 1

Here's how I solved the problem in case anyone else comes across this (mdl race condition using angular):

• Download the material.js library after loading the header directive
• wait for window.componentHandler
• Then run window.componentHandler.upgradeAllRegistered();

Full code (placed in the 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); })(); }