md-menu md-list-item Angular Material

Question

我想在 md-2 行列表项指令上有一个 md-menu。注意：不是在次要操作上，而是主要在列表项本身上。文档指出第一个元素用作触发器并留在 DOM 中，而第二个元素表示菜单内容。所以我很惊讶下面的结构不起作用。

<md-list>

    <md-menu>

        <md-list-item class="md-2-line" ng-click="openMenu($mdOpenMenu, $event)" ng-repeat="prop in properties">
            <div class="md-list-item-text">
                <h3>{{ prop['display_name'] }}</h3>
                <p>{{ object[prop.key] }}</p>
            </div>
        </md-list-item>

        <md-menu-content width="6">
            <md-menu-item ng-repeat="val in prop['values']">
                <md-button ng-click="updateAttribute(prop.key, val)">
                    {{val}}
                </md-button>
            </md-menu-item>
        </md-menu-content>

   </md-menu>

</md-list>

但是，我真的看不出我做错了什么。我也不断收到以下错误，我不知道其中的含义：

angular.js:13550 TypeError: 无法读取未定义的属性 'hasAttribute' 在 r (http://localhost/flatt.io/app/node_modules/angular-material/angular-material.min.js:13:26527)

和

angular.js:13550 TypeError: 无法读取未定义的属性 '0' 在 enableHoverListener (angular-material.min.js:13)

此致

Answer 1

你的 ng-repeat where prop 被定义在 md-list-item 标签上。当该标签关闭时，prop 超出范围，因此当您定义 md-menu-content 时它不可用。

md-menu md-list-item Angular Material

md-menu md-list-item Angular Material

angularjs

angular-material