ng-click ons-list-item裏面的span不起作用

Question

我有一個列表項目和一個圖標的ons-list，當有人點擊列表項時，它應該去屏幕A，當我點擊圖標，它應該轉到屏幕B，但問題在於當我們點擊圖標時，ng-click衝突，技術上列表項也被點擊。請參閱下面的代碼。

<div ng-controller="getUserContacts"> 
<ons-list-header>Select Contact</ons-list-header> 
<ons-list style="margin: -1px 0"> 
    <div ng-show="loading" class="loading"><img src="img/loading.gif" height="50px" width="50px"></div> 
    <ons-list-item modifier="" class="list-item" ng-repeat="x in contacts track by $index" style="margin-left: 10px;" ng-click="setcontact(x); page.pushPage('sendmoney2.html', {animation: 'slide'});">      
     <ons-row>       
      <ons-col width="52px" style="padding: 10px 0 0 0;"> 
       <img src="img/red.png" height="42px" width="42px"/> 
      </ons-col> 
      <ons-col> 
       <header> 
        <span class="item-title">{{x.name}}</span> 
        <span class="list-item-note-sendmoney1" ng-click="page.pushPage('editContact.html', {animation: 'slide'});"><ons-icon icon="ion-ios-information-outline" size="28px"></ons-icon></span> 
       </header> 
       <p class="swipe-item-desc">{{x.phone}}</p> 
      </ons-col>        
     </ons-row>      
    </ons-list-item> 
</ons-list> 
</div> 

謝謝。

Answer 1

只要停止事件傳播，你應該沒問題。添加$ event.stopPropagation（）你的第二個NG點擊這樣的：

ng-click="page.pushPage('editContact.html', {animation: 'slide'});$event.stopPropagation()" 

Here的更深入的解釋有關魔術事件冒泡和捕捉後面。