md-menu 的错误 HTML 无效：需要两个子元素

Question

md-menu 的预期行为是我们执行以下操作：

<md-menu>
    <button ng-click="$mdOpenMenu()">Filters</button>
    <md-menu-content>
        <md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
    </md-menu-content>
</md-menu>

但是我在使用 md-menu-bar 时遇到一种情况，我想要一个快速访问按钮来刷新一些数据，这会导致错误无效 HTML for md-menu: Expected two children elements。虽然我也许可以看看不同的 UI，但感觉您应该能够明智地使用以下功能，但效果很好：

片段

<md-menu-bar>
    <md-menu>
        <button ng-click="$mdOpenMenu()">Filters</button>
        <md-menu-content>
            <md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
        </md-menu-content>
    </md-menu>
    <md-menu>
        <button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
    </md-menu>
</md-menu-bar>

有什么理由不应该这样做吗？

Answer 1

您可以使用快速访问按钮来刷新

<md-button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></md-button>

check this link

Answer 2

Every md-menu must specify exactly two child elements https://material.angularjs.org/latest/api/directive/mdMenu

如果您看到您的代码，缺少 md-menu 的第二部分。

 <md-menu>
    <button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
</md-menu>

The second element is the md-menu-content element which represents the contents of the menu when it is open. Typically this will contain md-menu-items, but you can do custom content as well.

注意：如果您需要元素列表，请尝试 md-list:

<md-list>
   <md-list-item>
      <md-menu>
            <button ng-click="$mdOpenMenu()">Filters</button>
            <md-menu-content>
                <md-menu-item ng-repeat="field in devices.fieldList"><md-button ng-click="devices.setFilter(field)" ng-bind="field.name"></md-button></md-menu-item>
            </md-menu-content>
       </md-menu>
    </md-list-item>
    <md-list-item>
        <button ng-click="data.refresh()"><md-icon class="material-icons">refresh</md-icon></button>
    </md-list-item>
</md-list>

Answer 3

if md-menu don't have children, use hide in md-menu-content to resolve the error

主页

<md-menu-content hide></md-menu-content>
</md-menu>

md-menu 的错误 HTML 无效：需要两个子元素

Error Invalid HTML for md-menu: Expected two children elements

angularjs

angular-material