ngClick在mdListItem和輔助按鈕

Question

我在我的項目上使用角材料（1.0.7），我想用輔助按鈕創建一個可點擊列表（從官方文檔複製）。

主要問題是當我單擊次按鈕時，列表項可點擊事件也被觸發。在文檔中，他們顯示與targetEvent的對話，但這不是我想要做的。

有我的代碼：

  <md-list-item class="md-2-line" ng-repeat="tag in tagsCtrl.showedTags|orderBy:'title'" ng-click="tagsCtrl.navigate(tag)"> 
       <ng-md-icon icon="label"></ng-md-icon> 
       <div class="md-list-item-text"> 
        <h3>{{ tag.title }}</h3> 
        <p>{{ tag.slug }}</p> 
       </div> 
       <span class="md-secondary" ng-show="tag.onProcess"> 
        <md-progress-circular md-mode="indeterminate" md-diameter="24"></md-progress-circular> 
       </span> 

       <span class="md-secondary" ng-hide="tag.onProcess"> 
        <md-button class=" md-icon-button md-hue-3" ng-click="tagsCtrl.editTag(tag, $event)" aria-label="Edit tag"> 
         <ng-md-icon icon="create"></ng-md-icon> 
        </md-button> 
        <md-button class=" md-icon-button md-hue-3" ng-click="tagsCtrl.deleteTag(tag)" aria-label="Delete tag"> 
         <ng-md-icon icon="delete"></ng-md-icon> 
        </md-button> 
       </span> 
      </md-list-item> 

導航功能是不是一個對話框。 你知道我該如何解決這個問題嗎？

Answer 1

我不知道我的理解是正確的，但你應該從冒泡到其父（從md-button在這種情況下的md-list-item）停止事件的傳播

檢查更多的文檔這裏jQuery event.stopPropagation() Method

那麼，你有：

ng-click="tagsCtrl.editTag(tag, $event)" 
ng-click="tagsCtrl.deleteTag(tag)" 

可以更換與

ng-click="tagsCtrl.editTag(tag, $event) && $event.stopPropagation()" 
ng-click="tagsCtrl.deleteTag(tag) && $event.stopPropagation()"