Material Design Lite 和 ng-include答案

【问题标题】：Material Design Lite and ng-includeMaterial Design Lite 和 ng-include
【发布时间】：2015-09-30 11:44:34
【问题描述】：

我正在启动一个应用程序，我正在添加一些从 getmdl 网站（标题和抽屉）提供的导航，如果它在 index.html 文件中，它可以正常工作，但是当我尝试 ng-include 时，测试汉堡包时不是因此显示抽屉，当我调整屏幕大小时，它完全消失了。

我认为某些 mdl 类在使用 tru ng include 时不起作用，但为什么？

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

【问题讨论】：

标签： angularjs web-applications material-design angularjs-ng-include material-design-lite

【解决方案1】：

如果问题是 ng-include，您可以使用 includeReplace 指令，将带有 ng-include 的 div 与文件中的 html 交换。

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

你可以这样使用它：

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

【讨论】：

同样的问题，这不是解决方案。它只会删除我使用该指令的元素。为什么您认为这可能会有所帮助？
有时 ng-include 会破坏某些指令的正常工作，因为它在两者之间添加了一个 div。这样 div 消失了，DOM 树就和如果你写没有 ng-include 的 html 一样。不知道这是否是一个解决方案，但它可能是。

【解决方案2】：

我也遇到了同样的问题。我尝试了很多<div ng-include>、<ng-include>、<span ng-include> 的不同组合...但没有成功。最后，我发现了这个可行的解决方法：只需在主 html 文件中编码“外部”div，然后仅在 externen html 文件中包含抽屉的内容。

所以 html 看起来像

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

我希望这对你有用。

【讨论】：