複数の要素がmd-list-item内のng-click以内にある

Question

私はWeb開発の初心者ですが、まだ角度材料指示詞を使用することに慣れています。

私はをmd-list-itemディレクティブに埋め込みたいと考えており、そのアイテムに対して2つの別々のアクションを実行したいと考えています。 1つは一般にmd-list-itemであり、1つはmd-list-itemに埋め込まれた要素で、異なる動作を実行します。

私が今見ているのは、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> 

Answer 2

あなたはDOMを伝播するのクリックイベントを停止する必要があります。深いクリックイベントの関数呼び出しに$イベントを渡します。以下を参照してください：関数自体に続いて

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