md- menu的HTML无效:菜单应包含`md-menu-content`元素

Question

我在我的项目中有以下依赖项。

{
  "dependencies": {
    "angular": "^1.6.2",
    "angular-animate": "^1.6.2",
    "angular-aria": "^1.6.2",
    "angular-material": "^1.1.3",
    "angular-material-data-table": "^0.10.10",
    "angular-resource": "^1.6.2",
    "angular-route": "^1.6.2",
    "material-design-icons": "^3.0.1"
  }
}

我在一个地方使用md-menu，它看起来像这样。

<div layout="column" ng-controller="sidenavCtrl">
  <section layout="row" flex>
    <md-sidenav 
      class="md-sidenav-left"
      md-is-locked-open="$mdMedia('gt-md')"
      md-whiteframe="4"
      md-component-id="left">

      <md-toolbar>
        <div class="md-toolbar-tools">
          <h1>CMDB</h1>
          <span flex></span>
          <md-button ng-click="close()"><i class="material-icons">menu</i></md-button>
        </div>
      </md-toolbar>

      <md-content layout-padding class="md-sidenav-content">
        <md-button class="md-primary" hide-gt-md>
          Close Sidenav Left
        </md-button>

        <md-menu>
          <md-menu-content>
            <md-menu-item>
              <a class="md-button" href="#!/" title="Home">Home</a>
            </md-menu-item>
            <md-menu-item>
              <a class="md-button" href="#!/about" title="About">About</a>
            </md-menu-item>
          </md-menu-content>
        </md-menu>

      </md-content>
    </md-sidenav>
  </section>
</div>

每次加载页面时，我都会遇到这个错误。

Error: Invalid HTML for md-menu: Expected the menu to contain a `md-menu-content` element.
n@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular-material/angular-material.min.js:16:14211
X@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:73:417
Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:176
Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
ba@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:59:87
Mc/c/</<@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:157
If/this.$get</m.prototype.$eval@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:148:43
If/this.$get</m.prototype.$apply@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:148:275
Mc/c/<@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:115
h/<.invoke@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:43:169
Mc/c@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:36
Mc@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:332
qe@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:20:1
@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:331:117
b@file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:37:36
 <md-menu class="md-menu">

我就是想不通为什么。

我找到了一些关于md-menu的其他帖子，但没有一个类似于这个问题。我的md-menu似乎遵循了两个子元素的标准。它基本上是从Angular材质演示中复制过来的，但不同的是我试图将它放在一个sidenav中。这并不在演示中。

它看起来对我来说还不错，而且到目前为止，它只是一个包含两个项目的占位符，直到我有时间进一步开发它。

Answer 1

你错过了打开菜单的按钮。

<md-menu>
   <md-button ng-click="vm.openMenu($mdOpenMenu, $event)">
      Open Menu
   </md-button>
      <md-menu-content>
        <md-menu-item>
          <a class="md-button" href="#!/" title="Home">Home</a>
        </md-menu-item>
        <md-menu-item>
          <a class="md-button" href="#!/about" title="About">About</a>
        </md-menu-item>
      </md-menu-content>
    </md-menu>

Answer 2

您使用的是嵌套菜单，内部的菜单缺少打开按钮，该按钮是md-menu所必需的，并对错误消息负责。此外，该按钮需要单击ng才能打开子菜单$mdMenu.open($event)。

所有你需要做的就是在md-menu中包含菜单项的按钮。这就是我编辑你的代码的方式：

<md-content layout-padding class="md-sidenav-content">
    <md-menu>
        <!-- md-button openning the menu needs to be inside of md-menu -->
        <md-button class="md-primary" hide-gt-md ng-click="$mdMenu.open($event)">
            Close Sidenav Left
        </md-button>
        <md-menu-content>
            <md-menu-item>
                <a class="md-button" href="#!/" title="Home">Home</a>
            </md-menu-item>
            <md-menu-item>
                <a class="md-button" href="#!/about" title="About">About</a>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
</md-content>

详情：https://material.angularjs.org/latest/api/directive/mdMenu