Angularjs 多个元素在md列表项中具有ng单击

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

我正在尝试在

md列表项

指令中嵌入

md按钮

，并希望对该项执行两个单独的

ng单击

操作。一个用于

md列表项

，另一个用于嵌入到

md列表项

中的

md按钮

元素，这将执行不同的操作

我现在看到的是，单击

md按钮

两个

ng单击

函数都会执行

有没有更好的办法。我设置ng click-on-md列表项的原因是为了在

md列表项

元素上获得涟漪和悬停效果

以下是我的代码片段：

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

{{song.title}
{{song.album}
{{song.year}

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

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

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

不，没有帮助：it’S仍然在执行这两个函数。我将尝试复制它。哦，明白了。我将ng点击移动到md按钮指令，而不是md图标，它工作了。感谢您的帮助。@JohnSmith如果有md复选框，该问题如何解决？请尝试使用
event.stopPropagation（）在MDNG按钮上单击功能
$scope.addPlaylist = function(song, ev){ev.stopPropagation(); //rest of whatever this is supposed to do}