Question

我正在尝试角度素材菜单

 <md-menu class="address-menu" layout="row " layout-align="end-center " flex="10 ">
       <md-button  ng-click="vm.openMenu($mdOpenMenu, $event);vm.showAddressMenu(cartItemDetails)" class="address-menu-icon">
           <i class="material-icons">more_vert</i>
       </md-button>
      <apt-address-menu ng-if="itemDetails.showAddressMenu " details="itemDetails "></apt-address-menu>
</md-menu>

这里我正在尝试制作md-menu-content的指令，如下所示：

<md-menu-content width="4">
<md-menu-item >
    <md-button translate="ADDRESS_MENU.DUPLICATE"></md-button>
</md-menu-item>
<md-menu-item ng-click="vm.showShippingLocations()">
    <md-button translate="ADDRESS_MENU.CHANGE_ADDRESS"></md-button>
</md-menu-item>
<md-menu-item ng-click="vm.changeDefaultAddress()">
    <md-button translate="ADDRESS_MENU.DEFAULT_ADDRESS"></md-button>
</md-menu-item>
<md-menu-item >
    <md-button translate="ADDRESS_MENU.DELETE_CART"></md-button>
</md-menu-item>

但在这样做的时候，我收到了错误：

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

任何帮助都将不胜感激。

Answer 1

md-menu指令在编译时需要DOM中的一些元素，至少在1.1.4中。具体来说，它需要 md-menu 元素下的 md-menu-content 。

这就是 md-menu-content 不能放在你自己的指令模板中的原因，因为DOM将如下所示：

<md-menu>
<my-directive> <- Not md-menu-content
***here starts your directive***
<md-menu-content>
***code of your directive***
</md-menu-content>
***here ends your directive***
</my-directive>
<md-menu>

幸运的是，它不需要 md-menu-item 位于 md-menu-content 之下，所以你可以做的就是只包装 md-menu-item 。

这应该有效：

AptAddressMenu指令模板

<md-menu-item >
    <md-button translate="ADDRESS_MENU.DUPLICATE"></md-button>
</md-menu-item>
<md-menu-item ng-click="vm.showShippingLocations()">
    <md-button translate="ADDRESS_MENU.CHANGE_ADDRESS"></md-button>
</md-menu-item>
<md-menu-item ng-click="vm.changeDefaultAddress()">
    <md-button translate="ADDRESS_MENU.DEFAULT_ADDRESS"></md-button>
</md-menu-item>
<md-menu-item >
    <md-button translate="ADDRESS_MENU.DELETE_CART"></md-button>
</md-menu-item>

<强>父

<md-menu class="address-menu" layout="row " layout-align="end-center " flex="10 ">
       <md-button  ng-click="vm.openMenu($mdOpenMenu, $event);vm.showAddressMenu(cartItemDetails)" class="address-menu-icon">
           <i class="material-icons">more_vert</i>
       </md-button>
<md-menu-content>
      <apt-address-menu ng-if="itemDetails.showAddressMenu " details="itemDetails "></apt-address-menu>
</md-menu-content>
</md-menu>

错误：md-menu的HTML无效：期望菜单包含`md-menu-content`元素

1 个答案: