Question

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

我认为有些mdl类在使用trung 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>

Answer 1

如果问题是ng-include，你可以使用includeReplace指令，它将div与ng-include交换为文件中的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>

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

我希望，这对你有用。

Material Design Lite和ng-include

2 个答案: