Material Design Lite rendering problems with Angular JS

Question

I have some problems using Material Design Lite (getmdl.io). I followed the steps showed in the getmdl.io web in order to install it (actually I use bower), but I always have the same problem, when I change the ng-route in my web, some resources don't render properly, I need to reload the page to get it properly rendered, for example.

First I have this:

then when I reload, I get what I want:

What I cant understand is why other resources like google icons or buttons work correctly but the menu button on the nav bar and other resources like this one need to reaload the page in order to render properly.

I try to include the library using the hosted method and bower method.

Any idea what is going on?

Answer 1

i past in my code this function

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

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

It worked perfect! Good luck..

Answer 2

Libraries like MDL work by waiting for the page to load using the DOMContentLoaded event, scanning the page for things like input elements and manipulating them with JavaScript so that they can inject the bits and pieces needed to work with their components. This works fine on static websites, but the DOMContentLoaded event only fires once, so when Angular performs a page transition, the DOM changes without MDL knowing about it.

Material Design Lite has a section in its FAQ about using MDL on dynamic websites:

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:

<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>

Of course, this probably isn't terribly easy to do in your case, since you'd have to manually find each new element and call upgradeElement on it.

Usually, instead of doing this sort of event-based DOM manipulation, Angular uses directives to initiate DOM changes. Consider using a library built to interoperate with Angular, instead, such as Angular Material.