Angularjs md列表项中的md菜单作为第二个操作按钮

我有下面的代码在我的项目，我有这个问题。当我将

md菜单

组件添加到动态生成的（

ng repeat

）

md列表

组件中时，它将在JS控制台中显示此错误：

错误：md菜单的HTML无效：应为两个子元素

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

每个md菜单必须指定两个子元素。第一 元素是DOM中剩余的元素，用于打开菜单。这 元素称为触发器元素

---

我认为您的

ng click=“$mdOpenMenu（$event）”

需要在

md按钮上，而不是
md图标上
转到angular-material.js的源代码并添加/修改该部分。。。我将生成菜单作为项目外部的辅助项目

// 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";
    }
//检查辅助项目并将其移到外部
如果（第二项&&(
isMdMenu（第二项）||
secondaryItem.hasAttribute（'ng-click'）||
（tAttrs.ngClick&&
isProxiedElement（第二项））
)) {
电话：addClass（“md-with-secondary”）；
电话（第二项）；
}
功能isMdMenu（el）{
var nodeName=el.nodeName.toUpperCase（）；
返回节点名==“MD-MENU”；
}
当我使用Angular Material 1.0.0 RC1时，我也不能使用md列表项中的md菜单作为第二个操作按钮，但当我将Angular Material的js和css升级到1.1.0 RC4时，它工作了。工作代码如下所示，请注意“md次要”类需要分配给“md菜单”：


副标题
{{user.firstName}{{user.lastName}}
{{user.email}

菜单
选项{{item}
我试图添加
md按钮
指令，比如：
create
，但是现在，
md按钮
没有自点击动作（你不能点击这个按钮），我什么时候会向这个按钮添加class
md secondary
，我将看到我在问题中描述的错误。。。谢谢你的回复，我在Mac上的Firefox中测试了这段代码，但它不能正常工作。现在，我添加了alert（）函数，当您单击列表按钮时，该函数将启动。在Chrome中，它是正确的（只有当你点击列表按钮时才会触发动作-但你可以看到错误的点击动画（它覆盖了整个元素，而不仅仅是右按钮）），但在Firefox中，每次都会触发这个动作，你点击行，右菜单将不会显示。新代码笔：
<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>