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菜单似乎遵循建议的有两个子元素的标准。它基本上是从Angular Material演示中复制出来的，但区别在于我试图把它放在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菜单中包含菜单项的按钮。这就是我编辑您的代码的方式：

<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

md-menu的HTML无效：预计菜单包含`md-menu-content`元素

2 个答案: