ImNot ImNot - 6 months ago 205
AngularJS Question

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

I am newbie in web development and am still getting used to using the angular material directives.

I am trying to embed an

md-button
in the
md-list-item
directive and would like two separate
ng-click
actions on the item. One for the
md-list-item
in general and one for the
md-button
element embedded in to the
md-list-item
which would perform a different action.

What I am seeing right now is that on clicking the
md-button
both
ng-click
functions get executed.

Is there a better way of doing this. The reason I set the ng-click on md-list-item is to get the ripple and hover effect on the
md-list-item
element.

Here is my code snippet :

<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

Add md-secondary class to your button:

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