Question

我是网络开发的新手，我仍然习惯使用角度材质指令。

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

我现在看到的是，点击md-list-item两个md-button函数都会被执行。

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

这是我的代码段：

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>

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的多个元素

2 个答案: