md-list-item 中的 md-menu 作为第二个操作按钮

Question

我的项目中有下面的代码，我遇到了这个问题。当我将 md-menu 组件添加到我动态生成的 (ng-repeat) md-list 组件中时，它将在 JS 控制台中显示此错误：

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

我的HTML代码：

<md-card>
    <md-card-content>
        <h2>Menu</h2>
        <md-subheader class="md-no-sticky">List</md-subheader>
            <md-list-item ng-repeat="playlist in playlists" ng-click="someAction()">
                <p>{{playlist[1]}}</p>
                <md-menu>
                    <md-icon aria-label="Action" ng-click="$mdOpenMenu($event)" class="md-secondary md-hue-3 material-icons">create</md-icon>
                    <md-menu-content>
                        <md-menu-item><md-button ng-click="">Edit</md-button></md-menu-item>
                        <md-menu-item><md-button ng-click="">Remove</md-button></md-menu-item>
                    </md-menu-content>
                </md-menu>
            </md-list-item>
    </md-card-content>
</md-card>

你能帮我解决这个问题吗？

我认为，问题是在构建代码时，它看起来不一样，然后 md-menu 组件内部有 2 个子组件（2 个按钮），但我不知道如何解决这个问题.

编译代码如下：

<md-list-item class="md-with-secondary ng-scope md-clickable" tabindex="-1" role="listitem" ng-repeat="playlist in playlists">
    <button tabindex="0" ng-click="someAction()" class="md-no-style md-button md-ink-ripple" ng-transclude="">
        <div class="md-list-item-inner ng-scope">
            <p class="ng-binding">test</p>
            <md-menu class="md-menu ng-scope">
                <md-menu-content>
                    <md-menu-item role="menuitem">
                        <button tabindex="0" type="button" ng-click="" class="md-button md-ink-ripple" ng-transclude="">
                            <span class="ng-scope">Edit</span>
                        </button>
                    </md-menu-item>
                    <md-menu-item role="menuitem">
                        <button tabindex="0" ng-click="" class="md-button md-ink-ripple" ng-transclude="">
                            <span class="ng-scope">Remove</span>
                        </button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu>
        </div>
        <div style="" class="md-ripple-container"></div>
        <div style="" class="md-ripple-container"></div>
    </button>

    <button tabindex="0" ng-click="$mdOpenMenu($event)" class="md-secondary-container md-icon-button md-button md-ink-ripple" ng-transclude="">
        <md-icon tabindex="-1" aria-label="Open Chat" class="md-hue-3 material-icons ng-scope ng-isolate-scope">create</md-icon>
    </button>
</md-list-item>

Answer 1

Every md-menu must specify exactly two child elements. The first element is what is left in the DOM and is used to open the menu. This element is called the trigger element.

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

我认为您的 ng-click="$mdOpenMenu($event)" 需要在 md-button 元素上，而不是 md-icon

Answer 2

转到angular-material.js和add/modify那部分的源代码...我将生成菜单作为项目外的次要项目。


    // Check for a secondary item and move it outside
    if ( secondaryItem && (
    isMdMenu(secondaryItem) ||
    secondaryItem.hasAttribute('ng-click') ||
    ( tAttrs.ngClick &&
    isProxiedElement(secondaryItem) )
    )) {
       tEl.addClass('md-with-secondary');
       tEl.append(secondaryItem);
    }

    function isMdMenu(el) {
       var nodeName = el.nodeName.toUpperCase();

       return nodeName == "MD-MENU";
    }

Answer 3

当我使用 Angular Material 1.0.0 RC1 时，我也无法在 md-list-item 中使用 md-menu 作为第二个操作按钮，但是当我升级了 js 和 css Angular Material 到 1.1.0 RC4 它有效。工作代码是这样的，请注意 "md-secondary" class 需要分配给 "md-menu":

<md-list flex>
    <md-subheader class="md-no-sticky">sub header</md-subheader>
    <md-list-item ng-click="goToPerson(person.name, $event)" class="md-2-line" ng-repeat="user in userManagement.users">
        <img alt="{{ 'person.name' }}" ng-src="https://pixabay.com/static/uploads/photo/2014/03/25/16/54/user-297566_960_720.png" class="md-avatar"/>
        <div class="md-list-item-text">
            <h3>{{ user.firstName }} {{ user.lastName }} </h3>
            <p>{{ user.email }} </p>
        </div>
        <md-menu md-position-mode="target-right target"  class="md-secondary">
            <md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
                <md-icon md-menu-origin>menu</md-icon>
            </md-button>
            <md-menu-content width="4">
                <md-menu-item ng-repeat="item in [1, 2, 3]">
                    <md-button ng-click="ctrl.announceClick($index)">
                        <div layout="row" flex>
                            <p flex>Option {{item}}</p>
                            <md-icon md-menu-align-target md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
                        </div>
                    </md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>
    </md-list-item>
</md-list>

md-list-item 中的 md-menu 作为第二个操作按钮

md-menu inside md-list-item as a second action button

angularjs

angular-material