Question

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

错误：md-menu的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-menu组件内部有2个子项（2个按钮），但我不知道，如何解决这个问题。< / p>

以下是构建的代码：

<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

当我使用Angular Material 1.0.0 RC1但我将Angular Material的js和css升级到1.1.0时，我也无法在md-list-item中使用md-menu作为第二个操作按钮RC4有效。工作代码是这样的，请注意＆＃34; md-secondary＆＃34;需要将课程分配到＆＃34; md-menu＆＃34;：

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

Answer 2

每个md菜单必须指定两个子元素。首先元素是DOM中剩下的元素，用于打开菜单。这个 element被称为触发元素。

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

我认为您的private GObject getCollidingObject (double x, double y) { AudioClip bounceClip = MediaTools.loadAudioClip("bounce.au"); if (getElementAt(x, y) =! null) { return (getElementAt(x, y)); bounceClip.play(); } else if (getElementAt(x + 2 * BALL_RADIUS, y) =! null) { return(getElementAt(x + 2 * BALL_RADIUS, y); bounceClip.play(); } else if (getElementAt(x + 2 * BALL_RADIUS, y + 2 * BALL_RADIUS) =! null) { return(getElementAt(x + 2 * BALL_RADIUS, y + 2 * BALL_RADIUS)); bounceClip.play(); } else if (getElementAt(x, y + 2 * BALL_RADIUS) =! null) { return(getElementAt(x, y + 2 * BALL_RADIUS)); bounceClip.play(); } else { return null; }需要位于ng-click="$mdOpenMenu($event)"元素上，而不是md-button

Answer 3

转到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";
    }

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

3 个答案: