I'm developing a web application with Angular and MDL.
I googled a lot and I realized that when the page is completely loaded and rendered by angular I should run componentHandler.upgradeDom()
to let MDL render the page.
However I really don't know where to put it. I need a callback or something that executes that command when angular has completely rendered the page.
I've tried using directives and the $viewcontentloaded
callback but they did not work.
I've found a working solution but I really don't like the idea of having a function that runs every 200ms.
app.run(function() {
var mdlUpgradeDom = false;
setInterval(function() {
if (mdlUpgradeDom) {
componentHandler.upgradeDom();
mdlUpgradeDom = false;
}
}, 200);
var observer = new MutationObserver(function () {
mdlUpgradeDom = true;
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
Do you have any idea about how to load mdl?
EDIT
I've found out that the problem is that in my controller I do some async requests that are useful to create tabs. In this way mdl renders while they're not complete and tabs are not properly rendered by mdl.
I'm still facing with this problem.