CODEWITHSUNDEEP
angularjsangular-material
Stefan Midjich
Stefan Midjich

Reputation: 510

Invalid HTML for md-menu: Expected the menu to contain a `md-menu-content` element

I have the following dependencies in my project.

{
  "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"
  }
}

I'm using md-menu in one place and it looks like this. 

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

I get this error at every page load.

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

And I just can't figure out why.

I've found some other posts about md-menu but none resembling this issue. My md-menu seems to follow the proposed standard of having two child elements. It's essentially copied from the Angular Material demos but the difference is that I tried to put it inside a sidenav. Which isn't in the demos.

It looks ok for me, and it works in so far that it's a placeholder with two items until I get time to develop it more.

Upvotes: 0

Views: 1636

Answers (2)

JTV
JTV

Reputation: 21

You are using nested menus, the inner one is missing the openning button, that is requiered by md-menu and is responsible for the error message. Plus, the button need an ng-click to open the submenu $mdMenu.open($event).

All you need to do is include button of the menu-item in the md-menu. That is how I edited your code:

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

Details: https://material.angularjs.org/latest/api/directive/mdMenu

Upvotes: 0

tcrite
tcrite

Reputation: 553

You're missing your button to open the menu.

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

Upvotes: 1

Related Questions