Material Design Lite Angular JS Resolution Problems

Question

I have some problems using Material Design Lite ( getmdl.io ). I followed the steps shown on the getmdl.io website to install it (I actually use the conversation), but I always have the same problem when I change the ng route on my network, some resources are not displayed properly, I need to reload the page so that it displays correctly, for example.

First I have this:

then on reboot I get what I want:

What I cannot understand is why other resources, such as Google icons or buttons, work correctly, but the menu button on the navigation bar and other resources, such as this one, require the page to load for proper rendering.

.

, ?

Answer 1

, MDL, , DOMContentLoaded, , , JavaScript, , . -, DOMContentLoaded , , Angular , DOM , MDL .

Material Design Lite FAQ MDL -:

Material Design Lite , MDL, . DOM upgradeElement. , :

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

, , , , upgradeElement .

, DOM , Angular DOM. , Angular, , Angular .

Answer 2

i

angular.module('app', ['ngRoute']).

    run(function($rootScope, xxxx, xxx){
        $rootScope.$on('$viewContentLoaded', function(event, next) {
            componentHandler.upgradeAllRegistered();
        });
    });

! ..