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

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

错误:无效的HTML为md-menu:期望两个子元素。

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

当我使用Angular Material 1.0.0 RC1时，我也不能使用md-menu内部的md-list-item作为第二个动作按钮，但是当我将Angular Material的js和css升级到1.1.0 RC4时，它工作了。工作代码是这样的，请注意"md-secondary"类需要分配给"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-menu必须精确指定两个子元素。第一个元素是DOM中剩下的内容，用于打开菜单。这元素称为触发元素。

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

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

找到angular-material.js的源代码并添加/修改该部分…我将生成菜单作为项外的次要项。

<>之前//检查次要项并将其移到外部if (secondaryItem && ()isMdMenu (secondaryItem) | |secondaryItem.hasAttribute (ng-click) | |(tAttrs。ngClick & &isProxiedElement (secondaryItem)))) {tEl.addClass("md-with-secondary");tEl.append (secondaryItem);｝函数isMdMenu(el) {var nodeName = el.nodeName.toUpperCase();return nodeName == "MD-MENU";｝

相关内容

最新更新

热门标签：