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菜單似乎遵循有兩個子元素的建議標準。它基本上是從角度材質演示中複製的，但不同之處在於我試圖將它放在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>