Material Design Lite 和 ng-include

Question

I am starting an app and I am adding some navigation provided from getmdl website (header and drawer) it works fine if it is in the index.html file but when I try to ng-include, when testing the hamburger is not showing hence the drawer and when I resize the screen it vanishes totally.

For what I think is that some of the mdl classes are not working when used tru ng include, but why?

<div ng-include="'tmpl/navigation.html'"></div>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
  <!-- Title -->
  <span class="mdl-layout-title">Title</span>
  <!-- Add spacer, to align navigation to the right -->
  <div class="mdl-layout-spacer"></div>
  <!-- Navigation. We hide it in small screens. -->
  <nav class="mdl-navigation mdl-layout--large-screen-only">
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
    <a class="mdl-navigation__link" href="">Link</a>
  </nav>
</div>
</header>
<div class="mdl-layout__drawer">
 <span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
  <a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</div>

Answer 1

If the problem is the ng-include, you can use the includeReplace directive, that swap the div with ng-include with the html in the file.

  .directive('includeReplace', function () {
         return {
            require: 'ngInclude',
            restrict: 'A',
            /* optional */
            link: function (scope, el, attrs) {
               el.replaceWith(el.children());
            }
         };
      })

And you use it like this:

<div include-replace ng-include="'tmpl/navigation.html'"></div>

Answer 2

I just run into the same problem. I tried a lot of different combinations of <div ng-include> , <ng-include> , <span ng-include> ... with no success. At last, I found this workaround that is working: just code the "outer" div in the main html-file and then only include the content of the drawer in the externen html file.

So the html would look like

<div class="mdl-layout__drawer">
   <ng-include src="'./../templates/mdl_drawer.html'"></ng-include>
</div> 

I hope, this will work for you.