md-list-item 中带有 ng-click 的多个元素

Question

我是网络开发的新手，我仍然习惯使用 angular material 指令。

我正在尝试在 md-list-item 指令中嵌入 md-button，并希望对项目执行两个单独的 ng-click 操作。一个用于一般的 md-list-item，一个用于嵌入到 md-list-item 中的 md-button 元素，后者将执行不同的操作。

我现在看到的是，单击 md-button 时，两个 ng-click 函数都会执行。

有没有更好的方法。我在 md-list-item 上设置 ng-click 的原因是为了在 md-list-item 元素上获得涟漪和悬停效果。

这是我的代码片段：

<md-list-item class="md-3-line" ng-click="playSong(song)" flex ng-class="{'md-content-active' : playing === song.title}">
    <div class="md-list-item-text" layout="column">
        <h3>{{ song.title }}</h3>
        <h4>{{ song.album }}</h4>
        <p>{{ song.year }}</p>
    </div>
    <md-button aria-label="menu" class="md-fab md-mini md-primary">
        <md-icon md-svg-src="assets/icons/playlist_add.svg" ng-click="addPlaylist(song)"" aria-label="add_playlist"></md-icon>
    </md-button>
</md-list-item>

Answer 1

将 md-secondary class 添加到您的按钮：

<md-button aria-label="menu" class="md-secondary md-fab md-mini md-primary" ng-click="addPlaylist(song)">
    <md-icon md-svg-src="assets/icons/playlist_add.svg" aria-label="add_playlist"></md-icon>
</md-button>

Answer 2

您需要阻止点击事件向上传播 dom。将 $event 传递到深度点击事件的函数调用中。见下文：

<md-list-item class="md-3-line" ng-click="playSong(song)" flex ng-class="{'md-content-active' : playing === song.title}">
<div class="md-list-item-text" layout="column">
    <h3>{{ song.title }}</h3>
    <h4>{{ song.album }}</h4>
    <p>{{ song.year }}</p>
</div>
<md-button aria-label="menu" class="md-fab md-mini md-primary">
    <md-icon md-svg-src="assets/icons/playlist_add.svg" ng-click="addPlaylist(song, $event)"" aria-label="add_playlist"></md-icon>
</md-button>

然后是函数本身：

$scope.addPlaylist = function(song, ev){ev.stopPropagation(); //rest of whatever this is supposed to do}

md-list-item 中带有 ng-click 的多个元素

multiple elements with ng-click within in md-list-item

angularjs

angular-material