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的情况，我想要一个快速访问按钮来刷新一些数据，这会导致错误md-menu的无效HTML：预期有两个子元素。虽然我可能会看一个不同的用户界面，但感觉你应该能够明智地使用以下功能，但它很有用：

片段

<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

每个md菜单必须指定两个子元素 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>

第二个元素是md-menu-content元素，它表示菜单打开时的内容。通常，这将包含md-menu-items，但您也可以执行自定义内容。

注意：如果您需要元素列表，请尝试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

如果md-menu没有子节点，请在md-menu-content中使用hide来解决错误

家

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

错误md-menu的HTML无效：预期有两个子元素

3 个答案: