angularjs - 在 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 类添加到您的按钮:

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